Một tùy chọn trong thẻ Chọn có thể mang nhiều giá trị không?

Tôi nhận được một thẻ được chọn với một số tùy chọn ở dạng HTML:
(dữ liệu sẽ được thu thập và xử lý bằng PHP)

Thử nghiệm:

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

Có khi nào một option mang nhiều giá trị như khi người dùng chọn "One" thì một vài giá trị khác liên quan đến option này sẽ được ghi vào Database.

Tôi nên thiết kế selectThẻ như thế nào để mỗi tùy chọn có thể mang một giá trị như sau:

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

Một cách để làm điều này, đầu tiên là một mảng, thứ hai là một đối tượng:

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

Đã chỉnh sửa (3 năm sau khi trả lời) để đưa cả hai giá trị vào định dạng JSON (sử dụng JSON.stringify()) vì có khiếu nại rằng câu trả lời bằng chứng về khái niệm của tôi "có thể gây nhầm lẫn cho một nhà phát triển mới".

Tôi thực sự đã tự hỏi điều này ngày hôm nay và tôi đã đạt được nó bằng cách sử dụng chức năng bùng nổ php, như thế này:

HTML Form (trong một tệp tôi đặt tên là 'doublevalue.php':

    <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>

Hành động PHP (trong một tệp tôi đặt tên là doublevalue_action.php)

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

Như bạn có thể thấy trong đoạn mã đầu tiên, chúng tôi đang tạo một hộp chọn HTML tiêu chuẩn, với 2 tùy chọn. Mỗi tùy chọn có 1 giá trị, có một dấu phân cách (trong trường hợp này là '|') để chia các giá trị (trong trường hợp này là kiểu máy và màu sắc).

Trên trang hành động, tôi giải thích các kết quả thành một mảng, sau đó gọi từng kết quả. Như bạn có thể thấy, tôi đã tách và gắn nhãn chúng để bạn có thể thấy tác động mà điều này gây ra.

Tôi hi vọng điêu nay se giup được ai đo :)

có thể có nhiều giá trị trong một tùy chọn được chọn như hình dưới đây.

<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>

bạn có thể nhận được giá trị đã chọn trên sự kiện thay đổi bằng cách sử dụng jquery như hình dưới đây.

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

Bạn có thể tìm thêm chi tiết trong LINK này

một tùy chọn là đặt nhiều giá trị với dấu phẩy được phân tách

giống

value ="123,1234"

và ở phía máy chủ, tách chúng ra

Khi tôi cần làm điều này, tôi đặt các giá trị khác là data-value và sau đó sử dụng js để gán chúng cho một đầu vào ẩn

<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>

Nếu mục tiêu của bạn là ghi thông tin này vào cơ sở dữ liệu, thì tại sao bạn cần phải có giá trị chính và các giá trị 'liên quan' trong valuethuộc tính? Tại sao không chỉ gửi giá trị chính đến cơ sở dữ liệu và để bản chất quan hệ của cơ sở dữ liệu lo phần còn lại.

Nếu bạn cần có nhiều giá trị trong OPTIONs của mình, hãy thử một dấu phân cách không phổ biến:

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

...

hoặc thêm một đối tượng theo nghĩa đen (định dạng JSON):

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

...

Nó thực sự phụ thuộc vào những gì bạn đang cố gắng làm.

đặt giá trị cho mỗi tùy chọn như

<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>

ở phía máy chủ trong trường hợp là php, hãy sử dụng các hàm như boom [mảng] = boom ([mê sảng], [giá trị đã đăng]);

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

đoạn mã trên trả về một mảng chỉ có các số và dấu ':' bị xóa

Tôi đã làm điều này bằng cách sử dụng các thuộc tính dữ liệu. Sạch hơn rất nhiều so với các phương pháp cố gắng phát nổ khác, v.v.

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);

});

Còn các thuộc tính dữ liệu html thì sao? Đó là cách dễ dàng nhất. Tham khảo từ w3school

Trong trường hợp của bạn

$('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>

Sử dụng dấu phân cách để phân tách các giá trị.

<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];
?>

Trong HTML

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

Đối với JS

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

HOẶC CHO PHP

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

Thông số thẻ trùng lặp không được phép trong HTML. Những gì bạn có thể làm, là VALUE="1,2010". Nhưng bạn sẽ phải phân tích cú pháp giá trị trên máy chủ.

Thay vì lưu trữ các tùy chọn ở phía máy khách, một cách khác để thực hiện việc này là lưu trữ các tùy chọn dưới dạng các phần tử mảng con của một mảng kết hợp / được lập chỉ mục ở phía máy chủ. Các giá trị của thẻ select sau đó sẽ chỉ chứa các khóa được sử dụng để bỏ tham chiếu đến mảng con.

Đây là một số mã ví dụ. Điều này được viết bằng PHP vì OP đã đề cập đến PHP, nhưng nó có thể được điều chỉnh cho phù hợp với bất kỳ ngôn ngữ phía máy chủ nào bạn đang sử dụng:

<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>';

Điều này có thể hữu ích hoặc không hữu ích cho những người khác, nhưng đối với trường hợp sử dụng cụ thể của tôi, tôi chỉ muốn các tham số bổ sung được chuyển trở lại từ biểu mẫu khi tùy chọn được chọn - các tham số này có cùng giá trị cho tất cả các tùy chọn, vì vậy ... giải pháp của tôi là bao gồm các đầu vào ẩn trong biểu mẫu với lựa chọn, như:

<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>

Có lẽ rõ ràng ... rõ ràng hơn sau khi bạn nhìn thấy nó.

bạn có thể sử dụng nhiều thuộc tính

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