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


103

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

テスト:

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

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

select各オプションが次のように1つ以上の値を持つことができるようにタグを設計するにはどうすればよいですか。

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

1
phpを処理用のサーバースクリプトとして使用していますか
Jaison Justus

1
なぜこれが必要なのか知りたいですか?
サリル

2
@サリル。可能であれば好奇心から
user327712

回答:


153

これを行う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.stringify()私の概念実証の回答が「初心者の開発者を混乱させる可能性がある」という不満のため、両方の値をJSON形式(を使用して)に編集するように(回答後3年)編集しました。


9
エレガントなソリューションの場合は+1。注オプション2を使用する場合、変更イベントで$ .parseJSON($(this).val())を使用してjavascriptオブジェクトを取得することをお勧めします。各値を個別に取得する必要があると想定しています。
Lucas B

1
-1は、この回答により、OPが入力の評価中にコードに大きなセキュリティ問題を引き起こすためです。これを回避する最善の方法は、@ DavidHoersterによって提案されているようにJSONを使用することです。
fotanus 2013

5
@fotanus:私の2番目の例、他の質問が提案するものと同じJSONオブジェクトリテラルです。配列に関しては、それは単なる例です。いずれにしても、入力値をサニタイズするのはサーバー側コードの責任です。
ロブスト2013

1
@Robusto 2番目の例は有効なJSONではありません。一方、ルビーハッシュです。私のあなたの答えの問題は、あなたが説明または知っていることではありません(私はあなたがこれを安全にする方法を知っていると思うので)、それが省略され、初心者の開発者を混乱させる可能性があることです(私の友人と同じように)。
fotanus 2013

11
良い解決策ですが、文字列をJSONに解析するには、プロパティ名に次のように二重引用符を付ける必要があります:value = '{"foo": "bar"、 "one": "two"}'
Lars-Lasse

51

私は実際にこれを今日疑問に思っていました、そして私はこれを次のように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つの値があり、値(この場合はモデルと色)を分割するためのセパレーター(この例では '|')があります。

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

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


1
この方法は非常にシンプルで非常に便利ですが、この方法はすべてのブラウザーでサポートされているのでしょうか。
Waiyl Karim、2014

非常にシンプルで効率的に見えます。ありがとう
Varun Garg

クラスの素晴らしい、素晴らしい、素晴らしい、逸品。
user3370889 2016

3
@WaiylKarimすべてのブラウザで機能しない理由はありません。ブラウザーは値の内容を気にする必要はありません。そして、いくつかの記号に問題がある場合、別の記号を選択しても問題はありません。ドット、#、_、またはサーバー側で区切り文字として使用できる任意の文字と同様
Risinek

25

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

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

詳細については、このリンクをご覧ください



12

これを行う必要がある場合は、他の値をデータ値にしてから、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>

1
これは私に道の一部をもたらしました-また、すでに要素がある場合(セレクタクエリを実行している場合)、. data()を使用してそれらを戻すことができます。例:myElem.data( 'othervalue')
jsh

2
これは技術的にOPが要求することではありませんが、ここで検索を開始したときに達成しようとしていたことは100%です。+1は、選択オプションで2つのデータを単に格納するという最終目標であると私が考えるものへの単純でより良いパスです。
ライム、

5

この情報をデータベースに書き込むことが目的である場合、value属性にプライマリ値と「関連」値を含める必要があるのはなぜですか。なぜプライマリ値をデータベースに送信し、データベースのリレーショナルな性質に残りの部分を処理させないのか。

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

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

...

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

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

...

それは本当にあなたが何をしようとしているのかに依存します。


4

のような各オプションの値を入れます

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

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


4

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

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

});

4

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>


1
これを機能させるには「data-」が必要であり、2番目の部分は小文字にする必要があります。
Arun Prasad ES

1

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

<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

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

0

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


0

オプションをクライアント側に保存する代わりに、これを行う別の方法は、オプションをサーバー側の連想/インデックス配列のサブ配列要素として保存することです。その場合、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>';

0

これは他の人にとって役に立つかもしれませんし、そうでないかもしれませんが、私の特定のユースケースでは、オプションが選択されたときにフォームから追加のパラメーターを渡したいだけでした-これらのパラメーターはすべてのオプションで同じ値を持っていたので...私の解決策次のように、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>

多分明白...それを見た後にもっと明白。


-5

複数の属性を使用できます

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


彼は、複数の選択ではなく、1つの選択からの複数ビットの情報を必要としています。
Barmar
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.