web-dev-qa-db-ja.com

JQuery更新選択ボックス

このメソッドを使用してページの読み込み時にJQueryを使用して選択フィールドに入力しています

 $('#select').append('<option value="' + result + '">' + result + '</option>');

ただし、これにより、選択ボックスは「空白」のままになります。つまり、オプションリストの最初の値は、選択されたオプションとして事前に選択されません。

最初の値が事前に選択されるように、このリストを「更新」するにはどうすればよいですか？

申し訳ありません-以前はJQueryモバイルだと言っていたはずです

ありがとうございました。

jqueryselectjquery-mobileoption
11
user1202278

選択するオプション要素に「選択」属性を追加できます。

$('#select')
    .append('<option value="' + result + '" selected="selected">' + result + '</option>');

ループを使用して、選択した要素を正確に入力する方法を指定しないで、次のようにすることができます。

var data = ['a', 'b', 'c'];
var $select = $('#select'); // you might wanna empty it first with .empty()

for (var i = 0; i < data.length; i++) {
    var o = $('<option/>', { value: data[i] })
        .text(data[i])
        .prop('selected', i == 0);
    o.appendTo($select);
}​

[〜＃〜] demo [〜＃〜]

コメントで言ったように、jQuery Mobileを使用しているようです。

Selectmenuwidgetを使用している場合、そのコンテンツ/構造をプログラムで変更した後、プログラムで更新する必要があります。

$select.selectmenu("refresh", true);

ドキュメント

21
Didier Ghys

使用してもよい

$('#select').removeAttr('selected').find('option:first').attr('selected', 'selected');
4
Mohora Bogdan

単に..あなたが望むものは何でも値を設定します、すなわち：$('#select').val(5); ..だからあなたの場合はその$('#select').val(result);

編集：含まれている完全な作業例：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<select id='select'></select>
<br>
<input type=button onclick='addNew()' value='Add'>

<script>
function addNew()
{
        var result = Math.floor(Math.random()*1000);
        $('#select').append('<option value="' + result + '">' + result + '</option>'); 
        $('#select').val(result);           
} 
</script>

3
Ashraf

Mohora Bogdan の回答は1回しか機能しません。別のオプションを選択すると、機能しなくなります。

再利用可能にするために：

$('#select').prop('selected', false).find('option:first').prop('selected', true);
1
Hooman

新しいオプションを追加した後、すべてのブラウザが自動的に選択を更新するわけではありません。

私に役立つ1つのトリックは、新しいオプションを追加した直後に選択ボックスを非表示にして表示することです。あなたの場合：

 $('#select').append('<option value="' + result + '">' + result + '</option>').hide().show();

新しく追加された正しいオプションの選択に関しては、次のとおりです。

 $('select').val(result);
1
gintas

こんにちは、いくつかの調査の後、このコードで解決しました：

$('#select_id').empty();    
$('#select_id').append($('<option>',{text: 'pippo', value: 'pippo', selected: true}))
$('#select_id').change();

それが役に立てば幸い。

0
marfing