Question

当我在下拉列表中选择一个选项时，我正在使用jQuery弹出模式，但是，当选择“默认”选项时（我的值为空值），我无法禁止它工作）。

我的HTML

<div class="dropdownPanel">
    <select name="countryList" id="countryList">
        <option value="" disabled selected>SELECT</option>
        <option value="argentinia">Argentinia</option>
        <option value="brazil">Brazil</option>
        <option value="chile">Chile</option>
        <option value="mexico">Mexico</option>
        <option value="venezuela">Venezuela</option>
    </select>
    <button class="cancel">cancel</button>
    <button class="confirm">confirm</button>
</div>

JS

$('.dropdownPanel button.confirm').on('click', function() {
    if (!($('option[value=""]:selected'))) {
        $('.modal').css('display', 'block');
    }
});

我也试过......

$('.dropdownPanel button.confirm').on('click', function() {
    if ($('#countryList option').val() > 0) {
        $('.modal').css('display', 'block');
    }
});

对我缺少什么的想法？

Answer 1

    $('.dropdownPanel button.confirm').on('click', function() {
      if (!($('option[value=""]:selected'))) {
        $('.modal').css('display', 'block');
      }
    return false;
    });

Answer 2

更新：http://jsfiddle.net/bluey/bbS8v/

Html

<div class="dropdownPanel">
    <select name="countryList" id="countryList">
        <option value="0" disabled selected>SELECT</option>
        <option value="argentinia">Argentinia</option>
        <option value="brazil">Brazil</option>
        <option value="chile">Chile</option>
        <option value="mexico">Mexico</option>
        <option value="venezuela">Venezuela</option>
    </select>
    <button class="cancel">cancel</button>
    <button class="confirm">confirm</button>
</div>

<强> JQuery的

$('.confirm').click( function() {
      var val = $("#countryList").val();
        if (val!=0) {
            $('.modal').show();
             // alert(val); //test
        }

    return false;
});

在有效选择选项上显示模态

2 个答案: