javascript - 下拉式選單多選 - 連動選單




jQuery從下拉菜單中選擇選項 (12)

通常我使用$("#id").val()返回所選選項的值,但這次不起作用。 所選標籤具有id aioConceptName

html代碼

<label>Name</label>
<input type="text" name="name" />
<select id="aioConceptName">
    <option>choose io</option>
    <option>roma</option>
    <option>totti</option>
</select>

設置每個選項的值

<select id="aioConceptName">
    <option value="0">choose io</option>
    <option value="1">roma</option>
    <option value="2">totti</option>
</select>

$('#aioConceptName').val()不起作用,因為.val()返回value屬性。 要使它正常工作,必須在每個<option>上設置value屬性。

現在你可以調用$('#aioConceptName').val()而不是所有這些:selected被其他人建議:selected巫術。


讀取select的值(不是文本):

var status = $("#Status").val();
var status = $("#Status")[0].value;
var status = $('#Status option:selected').val();

如何禁用選擇? 在兩種變體中,可以使用以下值更改值:

一個

用戶無法與下拉菜單進行互動。 而且他不知道還有什麼其他選擇。

$('#Status').prop('disabled', true);

用戶可以在下拉列表中看到選項,但所有選項均被禁用:

$('#Status option').attr('disabled', true);

在這種情況下, $("#Status").val() 僅適用於小於1.9.0 jQuery版本。 所有其他變種將工作。

如何更新禁用的選擇?

從後面的代碼中,仍然可以更新您選擇的值。 它僅針對用戶禁用:

$("#Status").val(2);

在某些情況下,您可能需要觸發事件:

$("#Status").val(2).change();

使用jQuery,只需添加一個change事件並在該處理程序中獲取選定的值或文本。

如果您需要選擇的文字,請使用以下代碼:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").text())
});

或者,如果您需要選擇的值,請使用以下代碼:

$("#aioConceptName").change(function () {
    alert($("#aioConceptName :selected").attr('value'))
});

只是這應該工作:

var conceptName = $('#aioConceptName').val();

嘗試這個兄弟:

$(“#drpList”)。VAL()


如果你想抓取'值'屬性而不是文本節點,這將適用於你:

var conceptName = $('#aioConceptName').find(":selected").attr('value');

對於select元素也使用jQuery.val()函數:

.val()方法主要用於獲取表單元素的值,如input,select和textarea。 在選擇元素的情況下,當沒有選項被選擇時它將返回null ,並且當至少有一個選項時包含每個選定選項的值的數組,並且由於存在multiple屬性,可以選擇更多。

$(function() {
  $("#aioConceptName").on("change", function() {
    $("#debug").text($("#aioConceptName").val());
  }).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<select id="aioConceptName">
  <option>choose io</option>
  <option>roma</option>
  <option>totti</option>
</select>
<div id="debug"></div>


對於下拉選項,你可能需要這樣的東西:

var conceptName = $('#aioConceptName').find(":selected").text();

val()沒有做到這一點的原因是因為單擊一個選項不會改變下拉列表的值 - 它只是將:selected屬性添加到選擇的選項,該選項是下拉菜單的選項。


我偶然發現了這個問題,並開發了一個更簡潔的Elliot BOnneville的答案:

var conceptName = $('#aioConceptName :selected').text();

或一般:

$('#id :pseudoclass')

這為您節省了額外的jQuery調用,一次性選擇所有內容,並且更清晰(我的意見)。



這種場景可能是你最好的選擇,就是使用jQuery的change方法來查找當前選中的值,如下所示:

$('#aioConceptName').change(function(){

   //get the selected val using jQuery's 'this' method and assign to a var
   var selectedVal = $(this).val();

   //perform the rest of your operations using aforementioned var

});

我更喜歡這種方法,因為您可以在給定的選擇字段中為每個選定的選項執行功能。

希望有所幫助!


$('#aioConceptName option:selected').val();




html