[html] 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']

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