-1

選択内のオプションを「合計」(または複数選択) する簡単な方法を探しています。

例を挙げましょう。より簡単になります。ので、私は持っています：

<select name="test1" id="test_1" multiple="multiple">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>

反対側には、次のものがあります。

<a href="#form" onclick="document.getElementById('test_1').selectedIndex = 0;">Add to selection</a>
<a href="#form" onclick="document.getElementById('test_1').selectedIndex = 1;">Add to selection</a>
<a href="#form" onclick="document.getElementById('test_1').selectedIndex = 2;">Add to selection</a>

したがって、これらのリンクのそれぞれをクリックすると、それらのオプションがそれぞれ選択され、他のすべての選択が解除されます。

私が達成したいのは、「オプションを合計する」ことです。リンクをクリックすると、オプションの選択が切り替わり、絶対的な選択が行われないことを意味します。したがって、リンク 1 をクリックしてからリンク 3 をクリックすると、最終結果で「値 1」と「値 3」の両方のオプションが選択されます。リンク 3 をもう一度クリックすると、「値 3」オプションの選択が解除されます。

助けを得るのに十分明確であることを願っています。jQuery ソリューションか Javascript ソリューションかは気にしません。心から感謝する！

4

3 に答える 3

0

first selectedselectedIndexのインデックスとして定義されているため、これには使用できません。代わりに、必要なHTMLOptionElementsでselectedプロパティを設定します。<option>

<select name="test1" id="test_1" multiple="multiple">
    <option value="val1">Value 1</option>
    <option value="val2">Value 2</option>
    <option value="val3">Value 3</option>
</select>

function select(sel, idx) {
    sel.options[idx].selected = true;
}

function deselect(sel, idx) {
    sel.options[idx].selected = false;
}

var elm = document.getElementById('test_1');
select(elm, 0);   // select each one
select(elm, 1);
select(elm, 2);
deselect(elm, 1); // deselect something
// only options 0 and 2 left selected

デモ

于 2013-09-01T03:11:16.447 に答える
-1

ジョブを実行する jQuery ソリューションを次に示します。

HTML:

<select name="test1" id="test_1" multiple="multiple">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
</select>

    <a href="#form" data-val="val1">Add to selection</a>
    <a href="#form" data-val="val2">Add to selection</a>
    <a href="#form" data-val="val3">Add to selection</a>

JavaScript:

$('a').click(function(ev)
             {
                 ev.preventDefault();
                 var dataValue = $(this).data('val');
                 var select = $("#test_1 option[value='" + dataValue + "']")[0]; 
                 select.selected = !select.selected;    
             });

jsFiddle デモ ここをクリック!

于 2013-09-01T03:15:23.787 に答える