Question

我有一个具有特定ID的下拉列表，并且还有一个具有特定ID的div，我需要的是在选择该下拉列表的最后一个选项时显示div，或者该选项的选定值是“custom-size” “，我试图以这种方式做，而不是工作。

jQuery(document).ready(function($){$('#pa_size-stitch').change(function(){
    $('#pa_size-stitch').find("option:selected").each(function(){
        if($('#pa_size-stitch').attr("value")!=="custom-size"){


 $("#tm-extra-product-options").hide();
        }

        else{
            $("#tm-extra-product-options").show();
        }
    });
}).change();});

它不起作用，有什么建议吗？

Answer 1

请改为尝试：

$('#pa_size-stitch').change(function() {
    var isShown = this.value == 'custom-size' ||
                  (this.selectedIndex + 1) == this.options.length;

    $("#tm-extra-product-options").toggle(isShown);
});

请参阅Fiddle

Answer 2

你可以试试这个：

jQuery(document).ready(function($) {
    $('#pa_size-stitch').change(function(evt) {
        if( $(this).val() == "custom-size" ){
            $("#tm-extra-product-options").show();
        } else {
            $("#tm-extra-product-options").hide();
        }
    });
});

Answer 3

你可以试试这个：

$(document).on('change', '#pa_size-stitch', function() {
    var selectedVal = $('#pa_size-stitch :selected').val();

    if(selectedVal == $('#pa_size-stitch option:last()').val() || selectedVal == "custom-size") $("#tm-extra-product-options").hide();

    else $("#tm-extra-product-options").show();
});

Answer 4

＆＃13;

$('#pa_size-stitch').change(function() {
  
  $('option:selected', this).text() == "custom-size" || $("option:last",this).is(":selected") ? $("#tm-extra-product-options").hide() : $("#tm-extra-product-options").show()
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="pa_size-stitch">
  <option>l</option>
  <option>custom-size</option>
  <option>l</option>
</select>

<div id="tm-extra-product-options">asdad</div>

＆＃13;

使用$('option:selected', this).text() == "custom-size"检查相同的文字。
$("option:last",this).is(":selected")检查最后一个孩子

想要在选择的最后一个选项上显示div

4 个答案: