多次更改<select>元素的選定值

我可以將所選值設置爲沒有問題 - 堆棧溢出中已經有很多關於此問題的答案。多次更改<select>元素的選定值

我的問題是我怎麼能繼續CHANGE選定的值？

我首先想到的是我只是從選項中刪除「selected」屬性，然後重新設置目標選項的「selected」屬性。

它的工作！

---一個週期。

在第一個選項卡住之前，您只能更改選定值「x」的次數，並且不會響應更改。

$('#btn_25').on('click', function(e) { 
 
    $('#my_selector option').attr('selected', false); 
 
    $('#my_selector option[value=' + 25 + ']').attr('selected', true); 
 
}); 
 

 
$('#btn_50').on('click', function(e) { 
 
    $('#my_selector option').attr('selected', false); 
 
    $('#my_selector option[value=' + 50 + ']').attr('selected', true); 
 
}); 
 

 
$('#btn_100').on('click', function(e) { 
 
    $('#my_selector option').attr('selected', false); 
 
    $('#my_selector option[value=' + 100 + ']').attr('selected', true); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="my_selector"> 
 
    <option value="25">Twenty Five</option> 
 
    <option value="50">Fifty</option> 
 
    <option value="100">One Hundred</option> 
 
</select> 
 

 
<button id="btn_25">25</button> 
 
<button id="btn_50">50</button> 
 
<button id="btn_100">100</button>

如果單擊按鈕通過左到右兩次，你會發現自己被困在值25。至少，我做的。

我的問題是---這是我的代碼問題嗎？用JQuery（我非常懷疑）？使用FireFox（版本41.0.1）？

如果問題出在我的代碼上 - 需要更改以允許連續設置select元素的值？

來源

2015-10-15 Andrew Mack

爲什麼不使用'VAL（ 25/50/100）'？ – haim770

'$（'＃my_selector option'）。attr（'selected'，false）;'對於每個使用'.attr'的地方，改爲'.prop'都可以。但是，使用'.val'來設置select的值會更好。 – fuyushimoya

我想我在Stack Overflow上找到的答案已經過時了！非常酷，它很容易改變！感謝您的幫助！ –

您應該使用.val()方法來設置select值。你也應該使用一個共同的類綁定事件，它需要設定值可以是儲存在自定義data-*前綴屬性，這些屬性可以獲取使用.data()

$(function() { 
 
    $('.btn').on('click', function(e) { 
 
    $('#my_selector').val($(this).data('value')); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="my_selector"> 
 
    <option value="25">Twenty Five</option> 
 
    <option value="50">Fifty</option> 
 
    <option value="100">One Hundred</option> 
 
</select> 
 

 
<button type="button" class="btn" data-value="25">25</button> 
 
<button type="button" class="btn" data-value="50">50</button> 
 
<button type="button" class="btn" data-value="100">100</button>

來源

2015-10-15 12:13:33 Satpal

好吧，拍！ - 非常感謝你，Satpal！特別是對於那裏的額外建議，太棒了！ –

試試這個：

$('#btn_25').on('click', function(e) { 
    $('#my_selector').val('25'); 
}); 

$('#btn_50').on('click', function(e) { 
    $('#my_selector').val('50'); 
}); 

$('#btn_100').on('click', function(e) { 
    $('#my_selector').val('100'); 
});

這裏有一個工作示例：http://jsfiddle.net/92euh88o/

來源

2015-10-15 12:11:23

多次更改<select>元素的選定值

回答

相關問題