Select 태그의 옵션이 여러 값을 가질 수 있습니까?

HTML 형식의 몇 가지 옵션이있는 선택 태그가 있습니다.
(데이터는 PHP를 사용하여 수집 및 처리됩니다.)

테스트 :

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

사용자가 "하나"를 선택한 경우와 같이 옵션이 여러 값을 전달할 수 있습니까? 그러면이 옵션과 관련된 몇 가지 다른 값이 데이터베이스에 기록됩니다.

select각 옵션이 다음과 같이 하나 이상의 값을 전달할 수 있도록 태그를 어떻게 디자인해야합니까?

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

이를 수행하는 한 가지 방법은 첫 번째는 배열이고 두 번째는 객체입니다.

    <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()내 개념 증명 답변이 "초보 개발자를 혼란스럽게 할 수있다"는 불만 때문에 두 값을 JSON 형식 (사용 ) 으로 입력하도록 편집 (답변 3 년 후)되었습니다 .

나는 실제로 오늘 이것을 궁금해했고, 다음과 같이 php explode 함수를 사용하여 달성했습니다.

HTML 양식 (파일에서 '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>

PHP 액션 (내가 doublevalue_action.php라는 파일에서)

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

첫 번째 코드에서 볼 수 있듯이 두 가지 옵션이있는 표준 HTML 선택 상자를 만들고 있습니다. 각 옵션에는 값 (이 경우 모델 및 색상)을 분할하는 구분 기호 (이 경우 '|')가있는 1 개의 값이 있습니다.

작업 페이지에서 결과를 배열로 분해 한 다음 각각을 호출합니다. 보시다시피, 이로 인해 발생하는 효과를 볼 수 있도록 구분하고 레이블을 지정했습니다.

나는 이것이 누군가에게 도움이되기를 바랍니다 :)

아래와 같이 선택 옵션에 여러 값을 가질 수 있습니다.

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

아래와 같이 jquery를 사용하여 변경 이벤트에서 선택한 값을 얻을 수 있습니다.

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

이 링크 에서 자세한 내용을 찾을 수 있습니다.

한 가지 옵션은 쉼표로 구분 된 다중 값을 입력하는 것입니다.

처럼

value ="123,1234"

서버 측에서 분리하십시오.

이 작업을 수행해야 할 때 다른 값 데이터 값을 만든 다음 js를 사용하여 숨겨진 입력에 할당합니다.

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

이 정보를 데이터베이스에 쓰는 것이 목표라면 왜 value속성에 기본 값과 '관련'값이 있어야 합니까? 기본 값을 데이터베이스에 보내고 데이터베이스의 관계형 특성이 나머지를 처리하도록하는 것이 어떻습니까?

에 여러 값이 있어야하는 경우 OPTION흔하지 않은 구분 기호를 사용해보십시오.

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

...

또는 객체 리터럴 (JSON 형식)을 추가합니다.

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

...

그것은 당신이하려는 일에 달려 있습니다.

각 옵션에 대한 값을 입력하십시오.

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

PHP의 경우 서버 측에서 explode [array] = explode ([delimeter], [posted value]);

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

위의 코드는 숫자 만있는 배열을 반환하고 ':'가 제거됩니다.

데이터 속성을 사용하여이 작업을 수행했습니다. 폭발을 시도하는 다른 방법보다 훨씬 깨끗합니다.

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

});

HTML 데이터 속성은 어떻습니까? 그것이 가장 쉬운 방법입니다. w3school 에서 참조

귀하의 경우

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

구분 기호를 사용하여 값을 구분하십시오.

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

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

JS 용

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

또는 PHP

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

중복 태그 매개 변수는 HTML에서 허용되지 않습니다. 당신이 할 수있는 일은 VALUE="1,2010". 그러나 서버에서 값을 구문 분석해야합니다.

클라이언트 측에 옵션을 저장하는 대신이를 수행하는 또 다른 방법은 서버 측에있는 연관 / 인덱스 배열의 하위 배열 요소로 옵션을 저장하는 것입니다. 그러면 select 태그의 값에는 하위 배열을 역 참조하는 데 사용되는 키만 포함됩니다.

다음은 몇 가지 예제 코드입니다. 이것은 OP에서 PHP를 언급했기 때문에 PHP로 작성되었지만 사용중인 서버 측 언어에 맞게 조정할 수 있습니다.

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

이것은 다른 사람들에게 유용하거나 유용하지 않을 수 있지만, 내 특정 사용 사례의 경우 옵션이 선택되었을 때 양식에서 추가 매개 변수를 다시 전달하기를 원했습니다.이 매개 변수는 모든 옵션에 대해 동일한 값을 가졌으므로 내 솔루션 다음과 같이 select와 함께 양식에 숨겨진 입력을 포함하는 것이 었습니다.

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

아마 뻔한 ... 당신이 본 후에는 더 분명해집니다.

여러 속성을 사용할 수 있습니다.

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