3

私のページには、次のような選択オプション コントロールが設定されています。

<select multiple="multiple" name="name[]" id="ListId">
    <optgroup label="Group 1">
        <optgroup label="Group 1.1">
            <option selected="selected" value="1">One</option>
            <option value="2">Two</option>
            <option selected="selected" value="3">Three</option>
        </optgroup>
        <optgroup label="Group 1.2">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option selected="selected" value="3">Three</option>
        </optgroup>
    </optgroup>
    <optgroup label="Group 2">
        <optgroup label="Group 2.1">
            <option value="1">One</option>
            <option selected="selected" value="2">Two</option>
            <optionvalue="3">Three</option>
        </optgroup>
    </optgroup>
</select>

ページをロードするときにjQueryを使用して、次のコードで選択したアイテムを取得しようとします:

if($('#ListId').length > 0)
{
    var selected = [];

    $('#ListId option[selected="selected"]').each(
        function(i)
        {
            var val = $(this).val();
            var txt = $(this).text();

            selected[val] =   txt;
        }
    );
}

次に、ユーザーが次のように新しい選択を行った場合に、選択したアイテムを取得するために上記のコードを変更します。

if($('#ListId').length > 0)
{
    var selected = [];

    $('#ListId option[selected="selected"]').each(
        function(i)
        {
            var val = $(this).val();
            var txt = $(this).text();

            selected[val] =   txt;
        }
    );

    $('#ListId').change(
        function()
        {
            selected = [];

            $('#ListId option[selected="selected"]').each(
                function(i)
                {
                    var val = $(this).val();
                    var txt = $(this).text();

                    selected[val] =   txt;
                }
            );
        }
    );
}

ただし、問題は、プレビューの「選択された」アイテムを読み続けることです。

ライブ テストについては、こちらのフィドルにアクセスすることもできます: http://jsfiddle.net/Qem7n/

その問題を解決する方法について何か考えはありますか?

4

5 に答える 5

8

変化する

$('#ListId option[selected="selected"]')

に

$('#ListId option:selected')

理由:[selected="selected"]はライブ セレクターではありません。

例: http://jsfiddle.net/9YrY8/

于 2013-03-08T13:37:32.090 に答える
2

これを試して：

$('#ListId').change(function(){
  var selected = $('#ListId').val()
  var str = '';
  for (var i=0;i<selected.length;i++){
    if (i>0) str += ', ';
      str += selected[i];
    }
  alert(str);
});

またはこれ：

$('#ListId').change(function(){
    var $selected = $('#ListId option:selected');
    var i=0;
    var str = '';
    $selected.each(function(){
    if (i>0) str+= ', ';
    str += $(this).val() + " : " + $(this).text()+ " ";
    ++i;
  });
  alert(str);
});

または、選択したアイテムを配列に入れたい場合は、これを使用します:

$('#ListId').change(function(){
  var arr = [];
  var $selected = $('#ListId option:selected');
  //var i=0;
  //var str = '';
  $selected.each(function(){
     //if (i>0) str+= ', ';
     //str += $(this).val() + " : " + $(this).text()+ " ";
     arr[$(this).val()+$(this).parent().prop('label')] = $(this).text();
     //++i;
  });
  console.log(arr);
});

オプションに同じ値があり、オプション値を配列のインデックスとして使用すると、同じインデックス値を持つ配列の他の値が変更され、配列に追加されないことを考慮する必要があります。

于 2013-03-08T13:44:59.540 に答える
2

トーマスが言ったのと同じように、あなたも使うことができます

$('option:selected', '#ListId')

2 番目のパラメータは、検索の範囲を表します

于 2014-03-05T13:35:53.277 に答える
2

それには1行の解決策があります。これを使用してください

$('#formid').find('select[name="selectname"]').val()

それはうまくいくはずです、それは私にとってはうまくいきました！

于 2013-09-26T18:33:37.217 に答える
2

http://jsfiddle.net/jxQuU/52/

function put(sel,i) {
    sel[i.value]=$(i).text();
}
function change() {
    var sel = [];
    $('#ListId option:selected').each(function (k,i){put(sel,i);});
    alert(sel[1]);
}
$('#ListId').on('change',change);
change();
于 2013-03-08T13:30:54.483 に答える