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

Display modal on valid select option

本文关键字：显示 模态 选项 选择 有效      更新时间：2023-09-26

当在下拉列表中选择一个选项时，我使用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');
    }
});

有什么想法吗？

更新：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;
});

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