1

HTMLでのページ読み込み時に1つのアイテムが選択された選択ドロップダウンリストがあります。

<select name = "options">
  <option value = "1">Item1</option>
  <option value = "2" selected>Item2</option>
  <option value = "3">Item3</option>
  <option value = "4">Item4</option>
</select>

ユーザーがシフトを押して「アイテム3」などの別のオプションを選択したときに、新しい選択オプションをキャプチャしたいと思います。

リスト内のすべての選択を見つけるための次のコードがあります

 var value = "";
 for (var intLoop = 0; intLoop < Form.elements[index].length; intLoop++) {

     if(Form.elements[index][intLoop].selected )
             value = value + Form.elements[index][intLoop].value;
 }

「アイテム 2」と「アイテム 3」が選択されているのがわかりますが、「アイテム 3」のみを取得したいと考えています。出来ますか？

4

4 に答える 4

3

これは、何が選択され、何が選択解除されたかを示すコードですhttp://jsfiddle.net/8dWzB/

を使用しておりArray.prototype.indexOf、最速の方法ではありません。しかし、それはあなたを正しい方向に導くはずです。

HTML

<select id="options" multiple="multiple">
  <option value = "1">Item1</option>
  <option value = "2" selected>Item2</option>
  <option value = "3">Item3</option>
  <option value = "4">Item4</option>
</select>

JS

function getSelectedIndexes(select) {
   var selected = [];
   for (var i = 0; i  < select.options.length; i++) {
       if(select.options[i].selected ) {
            selected.push(i);
       }
   }
   return selected;
}

var select = document.getElementById("options");
var prevSelected = getSelectedIndexes(select);

select.onchange = function(e) {
    var currentlySelected = getSelectedIndexes(this);

    for (var i =0; i < currentlySelected.length; i++) {
        if (prevSelected.indexOf(currentlySelected[i]) == -1) {
            console.log("Added to selection ", this.options[currentlySelected[i]].text);
        }
    }

    for (var i =0; i < prevSelected.length; i++) {
        if (currentlySelected.indexOf(prevSelected[i]) == -1) {
            console.log("Removed from selection  ", this.options[prevSelected[i]].text);
        }
    }        
    prevSelected = currentlySelected;
};
​

最後にクリックされた項目だけを知りたい場合は、次のコードを使用できます。すべてのオプション オブジェクトにハンドラーを簡単に設定できるように、jQuery を使用します。キーボードで選択を変更すると、これは機能しないことに注意してください

    $('option').click(function(e){
        var parentNode = this.parentNode;
        for (var i=0; i < this.parentNode.options.length; i++) {
            if (parentNode.options[i] == this) {
              console.log('Clicked item with index', i);
              break;
            }
        }
    });
于 2012-06-13T22:19:31.957 に答える
1

選択したオプションの値を変更イベントの前 (例: アイテム 1 と 2 が選択されている) にチェックし、イベントの後で (例: アイテム 1、2 および 3 が選択されている) 再度チェックし、違いを比較することができます。

ここに例があります。

ここでフィドル: http://jsfiddle.net/FnAuz/4/

select私はそれが問題の核心だと思っているので、複数の選択を許可するように変更しました。

HTML:

<form id="my-form">
    <select name = "options" id="options" multiple>
      <option value = "val1">Item1</option>
      <option value = "val2">Item2</option>
      <option value = "val3">Item3</option>
      <option value = "val4">Item4</option>
    </select>
</form>​

JS:

var oldValue = "";
document.getElementById('options').onchange = function() {
    var myForm = document.getElementById ('my-form');
    var value = "";
    for (var intLoop = 0; intLoop < myForm.elements[0].length; intLoop++) {
        if(myForm.elements[0][intLoop].selected) {
            value = value + myForm.elements[0][intLoop].value;
        }
    }
    for (var intLoop = 0; intLoop < myForm.elements[0].length; intLoop++) {
        var optionVal = myForm.elements[0][intLoop].value;
        if(myForm.elements[0][intLoop].selected && value.indexOf(optionVal) !== -1  && oldValue.indexOf(optionVal) === -1) {
            console.log('Last clicked was ' + myForm.elements[0][intLoop].value)
        }
    }
    oldValue = value;
};

編集:ユーザーがコマンド/ctrl 選択を行ったときに私の例が機能することに気付きましたが、シフト選択を行うと、すべての新しい値が「最後にクリックされた項目」としてカウントされます。したがって、私のコードでは、このシナリオを説明するためにいくつかの作業が必要になります。時間はありませんが、私のコードが現在の状態で役立つことを願っています!

于 2012-06-13T21:45:48.620 に答える
0

乱雑に見え始めたので、回答として投稿します：

<html>
<head>
<script type="text/javascript">
<!--
var value = '0';

document.getElementById('options').onchange = function() {
    value = parseInt(value) + parseInt(this.value);
    alert(value);
}
-->
</script>
</head>
<body>
    <select name="options" id="options">
    <option value = "1">Item1</option>
      <option value = "2" selected>Item2</option>
      <option value = "4">Item3</option>
      <option value = "8">Item4</option>
    </select>
</body>    
</html>

複数のアイテムを選択するためのエディション: アイテムを蓄積したい場合は、各製品にバイナリ ID を割り当ててから、選択したすべての製品を合計から抽出できます。たとえば、合計が 7 の場合、簡単にバイナリ文字列 "111" に変換できます。これは、項目 1、2、4 を選択したことを意味します。少しクレイジーに聞こえますが、ただのアイデアです ;)

于 2012-06-13T21:40:47.857 に答える
0

これを試して ：

var e = document.getElementById("ID_of_Select_Element");
var _selectedValue= e.options[e.selectedIndex].value;
于 2013-10-25T04:19:47.633 に答える