Question

当用户选择默认选中的“选择”以外的任何选项时，我想显示警告。我试图确定所选选项是否有值，但这不起作用。这就是我所拥有的，无法访问html：

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>

Answer 1

要实现此目的，您应该挂钩change的{{1}}事件并检查所选值。

另请注意，您不能select append()以外的任何元素option。最好在加载DOM时使用select，但隐藏。然后，您可以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>

Answer 2

您没有选择所选的选项，而是选择所有选项。然后.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>。

Answer 3

以下作品。我使用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>

with

Answer 4

你可以试试这个：

$(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>

使用jQuery定位选定的选项

4 个答案: