使用jQuery選擇目標選項

我想在用戶選擇默認情況下選擇的「選擇」以外的選項時顯示警報。我試圖確定選定的選項是否有價值，但這不起作用。這就是我，沒有訪問HTML：使用jQuery選擇目標選項

if (jQuery('#select_1 option').val()) { 
 
    jQuery('#select_1').append('<span>you selected an option</span>'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
<option value>choose</option> 
 
<option value="111">1</option> 
 
<option value="112">2</option> 
 
<option value="113">3</option> 
 
</select>

來源

2017-09-05 benua

嘗試的jQuery（ '＃select_1'）VAL（）= 「」，而不是 –

嘗試改變！ '<選項值>選擇'到'<選項值=「」>選擇' –

要做到這一點，你應該勾到change事件select和檢查所選值。

另請注意，您不能將append()以外的任何元素設置爲option至select。加載DOM中的span會更好，但隱藏起來會更好。然後，您可以toggle()它的基礎上選定的值，是這樣的：

$('#select_1').change(function() { 
 
    $('#alert').toggle(this.value !== ''); 
 
});

#alert { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value="">choose</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select> 
 

 
<span id="alert">you selected an option</span>

來源

2017-09-05 13:29:44

謝謝，不幸的是我不能通過html添加span - 在我的情況下，它是動態生成的，我無法訪問它。 – benua

你沒有選擇的選擇的選項，你選擇的所有選項。然後.val()返回第一個值。

不是獲取選項的值，而是獲取<select>的值，即所選選項的值。

$("#select_1").change(function() { 
 
    if (this.value) { 
 
    $("#output").append('<span>you selected an option</span>'); 
 
    } else { 
 
    $("#output").empty(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value>choose</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select> 
 
<div id="output"></div>

此外，你應該消息不追加到#select_1。 <select>的內容應僅爲<option>和<optgroup>。

來源

2017-09-05 13:30:26 Barmar

謝謝，現在當選擇不同的選項時，警報顯示多次。是否有可能只顯示一次？ – benua

你可以使用一個全局變量來記住他們之前是否選擇了一個值。然後只顯示警報，如果變量說什麼都沒有選擇之前，他們這次選擇了一些東西。 – Barmar

以下的作品。我已經使用$(select).val()而不是在選項元素上使用val()。

$('#select_1').on('change', function(){ 
 
    if($(this).val().trim() === ''){ 
 
    alert('Please select a value!'); 
 
    } else { 
 
    alert('You selected value:' + $(this).val()); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value>choose</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select>

來源

2017-09-05 13:38:56

你可以試試這個：

$(document).ready(function() { 
 
    $("#select_1").change(function(){ 
 
     if($('#select_1').val() != '') { 
 
      var text = $('#select_1 :selected').text(); 
 
      var value = $('#select_1 :selected').val(); 
 
      $('#appendDiv').append("<br><span>You selected an option with text:" + text + " and value: " + value + "</span>"); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select_1"> 
 
    <option value="">-- Choose --</option> 
 
    <option value="111">1</option> 
 
    <option value="112">2</option> 
 
    <option value="113">3</option> 
 
</select> 
 
<div id="appendDiv"> </div>

來源

2017-09-05 13:56:27

使用jQuery選擇目標選項

回答

相關問題