web-dev-qa-db-ja.com

Selectタグのオプションに複数の値を含めることはできますか？

HTMLフォームにいくつかのオプションを含むselectタグを取得しました：
（データはPHPを使用して収集および処理されます）

テスト：

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

ユーザーが「1」を選択した場合など、オプションが複数の値を保持することは可能ですか？このオプションに関連する他のいくつかの値がデータベースに書き込まれます。

SELECTタグをどのように設計すれば、各オプションが次のように複数の値を保持できるようになりますか。

<SELECT NAME="Testing">  
  <OPTION VALUE="1" value="2010"> One  
  <OPTION VALUE="2" value="2122"> Two  
  <OPTION VALUE="3" value="0"> Three
</SELECT>
htmloptions
94
user327712

これを行う1つの方法は、最初は配列、2番目はオブジェクトです。

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

概念実証の回答が「初心者開発者を混乱させる可能性がある」という不満のため、両方の値をJSON形式に（JSON.stringify()を使用して）編集しました（回答後3年）

130
Robusto

私は実際に今日これを疑問に思っていましたが、次のように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 />";
    ?>

最初のコードでわかるように、2つのオプションを持つ標準のHTML選択ボックスを作成しています。各オプションには1つの値があり、値（この場合はモデルと色）を分割するための区切り記号（この場合は '|'）があります。

アクションページでは、結果を配列に展開し、それぞれを呼び出しています。ご覧のとおり、これらを分離してラベルを付けたので、これが引き起こしている効果を確認できます。

私はこれが誰かを助けることを願っています:)

46
Nedra

以下に示すように、選択オプションに複数の値を含めることができます。

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

詳細はこちらをご覧ください LINK

19
Vara

1つのオプションは、カンマで区切られた複数の値を置くことです

好む

value ="123,1234"

サーバー側でそれらを分離します

15
Haim Evgi

これを行う必要があるときは、他の値をデータ値にし、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>
12
chiliNUT

この情報をデータベースに書き込むことが目標である場合、なぜvalue属性にプライマリ値と「関連する」値が必要なのですか？なぜプライマリ値をデータベースに送信し、データベースのリレーショナルな性質にそれ以外の面倒を見させてはいけませんか。

OPTIONsに複数の値を含める必要がある場合は、あまり一般的ではない区切り文字を試してください。

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

...

または、オブジェクトリテラル（JSON形式）を追加します。

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

...

それは本当にあなたがやろうとしていることに依存します。

5
David Hoerster

データ属性を使用してこれを行いました。爆発などを試みる他の方法よりもずっときれいです。

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

});
3
Jack Nicholson

次のような各オプションの値を入力します

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

上記のコードは、数値のみを含む配列を返し、「：」は削除されます

3
Jaison Justus

区切り文字を使用して値を区切ります。

<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];
?>
1
Chad C.

クライアント側でオプションを保存する代わりに、これを行う別の方法は、サーバー側で連想配列/インデックス配列のサブ配列要素としてオプションを保存することです。この場合、選択タグの値には、サブ配列の逆参照に使用されるキーのみが含まれます。

以下にコード例を示します。 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>';
0
Kodos Johnson

HTMLでは、タグパラメータの重複は許可されていません。できることは、VALUE="1,2010"です。ただし、サーバー上の値を解析する必要があります。

0
Witek