Select etiketindeki bir Seçenek birden çok değer taşıyabilir mi?

HTML biçiminde bazı seçeneklere sahip seçkin bir etiket aldım:
(veriler PHP kullanılarak toplanacak ve işlenecek)

Test yapmak:

<select name="Testing">  
  <option value="1"> One  
  <option value="2"> Two  
  <option value="3"> Three
</select>

Bir kullanıcının "Bir" i seçmesi gibi bir seçeneğin birden çok değeri taşıması mümkün mü, bu seçenekle ilgili birkaç diğer değer Veritabanına yazılacaktır.

selectEtiketi, her seçeneğin birden fazla değer taşıyabilmesi için aşağıdaki gibi nasıl tasarlamalıyım :

<select name="Testing">  
  <option value="1" value="2010"> One  
  <option value="2" value="2122"> Two  
  <option value="3" value="0"> Three
</select>

Bunu yapmanın bir yolu, önce bir dizi, ikincisi bir nesne:

    <select name="">
        <option value='{"num_sequence":[0,1,2,3]}'>Option one</option>
        <option value='{"foo":"bar","one":"two"}'>Option two</option>
    </select>

JSON.stringify()Kavram kanıtı yanıtımın "yeni başlayan bir geliştiricinin kafasını karıştırabileceği" şikayeti nedeniyle, her iki değeri de JSON formatına (kullanarak ) koymak için düzenlendi (yanıtladıktan 3 yıl sonra) .

Aslında bugün bunu merak ediyordum ve bunu php patlatma işlevini kullanarak başardım, şöyle:

HTML Formu ('doublevalue.php' adını verdiğim bir dosyada:

    <form name="car_form" method="post" action="doublevalue_action.php">
            <select name="car" id="car">
                    <option value="">Select Car</option>
                    <option value="BMW|Red">Red BMW</option>
                    <option value="Mercedes|Black">Black Mercedes</option>
            </select>
            <input type="submit" name="submit" id="submit" value="submit">
    </form>

PHP eylemi (doublevalue_action.php adını verdiğim bir dosyada)

    <?php
            $result = $_POST['car'];
            $result_explode = explode('|', $result);
            echo "Model: ". $result_explode[0]."<br />";
            echo "Colour: ". $result_explode[1]."<br />";
    ?>

İlk kod parçasında görebileceğiniz gibi, 2 seçenekli standart bir HTML seçme kutusu oluşturuyoruz. Her seçenek, değerleri ayırmak için ayırıcıya (bu örnekte '|') sahip 1 değere sahiptir (bu durumda, model ve renk).

Eylem sayfasında, sonuçları bir dizi halinde patlatıyorum, sonra her birini çağırıyorum. Gördüğünüz gibi, neden olduğu etkiyi görebilmeniz için onları ayırdım ve etiketledim.

Umarım bu birine yardımcı olur :)

aşağıda gösterildiği gibi bir seçim seçeneğinde birden fazla değere sahip olmak mümkündür.

<select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
</select>

aşağıda gösterildiği gibi jquery kullanarak değişiklik olayında seçilen değeri elde edebilirsiniz.

$("#ddlEmployee").change(function () {
     alert($(this).find(':selected').data('city'));
});

Bu LINK'de daha fazla ayrıntı bulabilirsiniz

Bir seçenek, virgülle ayrılmış çoklu değer koymaktır

sevmek

value ="123,1234"

ve sunucu tarafında onları ayırın

Bunu yapmam gerektiğinde, diğer değerleri veri değerleri yapıyorum ve sonra js kullanarak onları gizli bir girişe atıyorum

<select id=select>
<option value=1 data-othervalue=2 data-someothervalue=3>
//...
</select>

<input type=hidden name=otherValue id=otherValue />
<input type=hidden name=someOtherValue id=someOtherValue />

<script>
$('#select').change(function () {
var otherValue=$(this).find('option:selected').attr('data-othervalue');
var someOtherValue=$(this).find('option:selected').attr('data-someothervalue');
$('#otherValue').val(otherValue);
$('#someOtherValue').val(someOtherValue);
});
</script>

Amacınız bu bilgiyi veritabanına yazmaksa, o zaman neden bir birincil değere ve valueöznitelikte 'ilgili' değerlere ihtiyacınız var ? Neden sadece birincil değeri veritabanına göndermiyor ve geri kalanını veritabanının ilişkisel doğasına bırakmıyorsunuz?

E-postalarınızda birden fazla değere ihtiyacınız varsa OPTION, çok yaygın olmayan bir sınırlayıcı deneyin:

<OPTION VALUE="1|2010">One</OPTION>

...

veya bir nesne değişmezi (JSON biçimi) ekleyin:

<OPTION VALUE="{'primary':'1','secondary':'2010'}">One</OPTION>

...

Gerçekten ne yapmaya çalıştığınıza bağlı.

gibi her seçenek için değerler koyun

<SELECT NAME="val">
   <OPTION VALUE="1" value="1:2:3:4"> 1-4  
   <OPTION VALUE="2" value="5:6:7:8"> 5-8  
   <OPTION VALUE="3" value="9:10:11:12"> 9-12
</SELECT>

sunucu tarafında php durumunda, patlatma [dizi] = patlatma ([sınırlayıcı], [yayınlanan değer]) gibi işlevleri kullanın ;

$values = explode(':',$_POST['val']

yukarıdaki kod sadece sayılara sahip bir dizi döndürür ve ':' kaldırılır

Bunu veri özniteliklerini kullanarak yaptım. Patlamaya çalışan diğer yöntemlere göre çok daha temizdir.

HTML

<select class="example">
    <option value="1" data-value="A">One</option>
    <option value="2" data-value="B">Two</option>
    <option value="3" data-value="C">Three</option>
    <option value="4" data-value="D">Four</option>
</select>

JS

$('select.example').change(function() {

    var other_val = $('select.example option[value="' + $(this).val() + '"]').data('value');

    console.log(other_val);

});

Peki ya html veri öznitelikleri? Bu en kolay yol. W3school'dan referans

Senin durumunda

$('select').on('change', function() {
  alert('value a is:' + $("select option:selected").data('valuea') +
    '\nvalue b is:' + $("select option:selected").data('valueb')
  )
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select name="Testing">
  <option value="1" data-valuea="2010" data-valueb="2011"> One
    <option value="2" data-valuea="2122" data-valueb="2123"> Two
      <option value="3" data-valuea="0" data-valueb="1"> Three
</select>

Değerleri ayırmak için bir sınırlayıcı kullanın.

<select name="myValues">
<option value="one|two">
</select>

<?php>
$value = filter_input(INPUT_POST, 'myValues');
$exploded_value = explode('|', $value);
$value_one = $exploded_value[0];
$value_two = $exploded_value[1];
?>

HTML olarak

<SELECT NAME="Testing" id="Testing">  
  <OPTION VALUE="1,2010"> One  
  <OPTION VALUE="2,2122"> Two  
  <OPTION VALUE="3,0"> Three
</SELECT>

JS için

  var valueOne= $('#Testing').val().split(',')[0];
  var valueTwo =$('#Testing').val().split(',')[1];
  console.log(valueOne); //output 1
  console.log(valueTwo); //output 2010

VEYA PHP İÇİN

  $selectedValue= explode(',', $value);
  $valueOne= $exploded_value[0]; //output 1
  $valueTwo= $exploded_value[1]; //output 2010

HTML'de yinelenen etiket parametrelerine izin verilmez. Yapabileceğin şey şudur VALUE="1,2010". Ancak sunucudaki değeri ayrıştırmanız gerekir.

Seçenekleri istemci tarafında depolamak yerine, bunu yapmanın başka bir yolu, seçenekleri sunucu tarafında ilişkilendirilebilir / dizinlenmiş dizinin alt dizi öğeleri olarak depolamaktır. Select etiketinin değerleri, bu durumda sadece alt diziye referansta bulunmak için kullanılan anahtarları içerir.

İşte bazı örnek kod. Bu, OP'de PHP'den bahsettiğinden beri PHP'de yazılmıştır, ancak kullandığınız sunucu tarafı diline uyarlanabilir:

<FORM action="" method="POST">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

PHP:

<?php
$options = array(
    1 => array('value1' => '1', 'value2' => '2010'),
    2 => array('value1' => '2', 'value2' => '2122'),
    3 => array('value1' => '3', 'value2' => '0'),
);
echo 'Selected option value 1: ' . $options[$_POST['Testing']]['value1'] . '<br>';
echo 'Selected option value 2: ' . $options[$_POST['Testing']]['value2'] . '<br>';

Bu başkaları için yararlı olabilir veya olmayabilir, ancak benim özel kullanım durumum için, seçenek seçildiğinde sadece ek parametrelerin formdan geri gönderilmesini istedim - bu parametreler tüm seçenekler için aynı değerlere sahipti, bu yüzden ... benim çözümüm forma aşağıdaki gibi gizli girdileri dahil etmekti:

<FORM action="" method="POST">
    <INPUT TYPE="hidden" NAME="OTHERP1" VALUE="P1VALUE">
    <INPUT TYPE="hidden" NAME="OTHERP2" VALUE="P2VALUE">
    <SELECT NAME="Testing">  
        <OPTION VALUE="1"> One </OPTION> 
        <OPTION VALUE="2"> Two </OPTION>
        <OPTION VALUE="3"> Three </OPTION>
    </SELECT>
</FORM>

Belki açık ... onu gördükten sonra daha açık.

birden çok öznitelik kullanabilirsiniz

<SELECT NAME="Testing" multiple>  
 <OPTION VALUE="1"> One  
 <OPTION VALUE="2"> Two  
 <OPTION VALUE="3"> Three