HTML PART

Question

我想构建一个下拉菜单，如果第一个选择数据属于特定类别，将显示第二个选择。

如下所示，第一个选择将是关于COUNTRIES。如果所选国家/地区具有州，则将显示第二个下拉选择，其中包含该国家/地区的状态。

1）是否有标签（在我的代码＆＃34; xyz＆＃34;中），我可以用它来分隔＆＃34;州＆＃34;和＃34;无国家＆＃34;类别？如果有的话，我怎样才能读到＆＃34; xyz＆＃34;的价值？标记

2）如果我使用：

<option class="no-state" value="Germany">Germany</option>

然后使用jQuery读取它会给我值GermanSpain（这是正确的但不是我想要的）

$('.no-state').val();

HTML PART

<div id="country">
 <select>
     <option xyz="no-state" value="Germany">Germany</option>
     <option xyz="state" value="USA">USA</option>
     <option xyz="no-state" value="Spain">Spain</option>
 </select>
</div>

<div id="state" style="display:none" >
 <select>
     <option value="Utah">Utah</option>
     <option value="New York">New York</option>
     <option value="California">California</option>
 </select>
</div>

JQUERY PART

$(document).ready(function(){
    $('#country').change(function() {

       if (the value of "xyz" tag is === 'no-state')  
       {
        $('div#state').hide();
       }
       else
      {
        $('div#state').show();
      }
    });
});

我该怎么做才能解决这个问题？

感谢。

Answer 1

根据您的自定义属性xyz

添加了一个变量，以保持国家/地区是否有州

<强> JS

$(document).ready(function(){
    $('#country').change(function() {
       var hasStates = $(this).find("option:selected").attr("xyz");
       if (hasStates == 'no-state')  
       {
        $('div#state').hide();
       }
       else
      {
        $('div#state').show();
      }
    });
});

fiddle

Answer 2

我认为您可以使用.data() jQuery方法，该方法读取data-* 有效的html5 属性，但您必须更改标记以修复并使用此方法脚本：

$('#country select').change(function() {
   if ($(this).find('option:selected').data('xyz') === 'no-state') {
    $('div#state').hide();
   } else {
    $('div#state').show();
  }
});

您必须添加data-*前缀才能使其成为有效的html5属性。

<select>
   <option data-xyz="no-state" value="Germany">Germany</option>
   <option data-xyz="state" value="USA">USA</option>
   <option data-xyz="no-state" value="Spain">Spain</option>
</select>

Answer 3

使用class属性并不是那么糟糕：

HTML

 <select>
     <option class="no-state" value="Germany">Germany</option>
     <option class="state" value="USA">USA</option>
     <option class="no-state" value="Spain">Spain</option>
 </select>

的JavaScript

$(document).ready(function(){
    $('#country').change(function() {
        var $sel = $(this).find("option:selected");
        if ($sel.hasClass("no-state"))
        {
            $('div#state').hide();
        }
         else
        {
            $('div#state').show();
        }
    });
});

Fiddle

Answer 4

首先，我会将您的html结构更改为：

 <select id="country">
     <option xyz="no-state" value="Germany">Germany</option>
     <option xyz="state" value="USA">USA</option>
     <option xyz="no-state" value="Spain">Spain</option>
 </select>

 <select id="state" style="display: none;">
     <option value="Utah">Utah</option>
     <option value="New York">New York</option>
     <option value="California">California</option>
 </select>

然后你就可以做到：

$("#country").change(function() { 
    var hasState = $(this).find(':selected').attr('xyz') === "state";
    $("#state").toggle(hasState);
});

这是一个fiddle，可以看到它的实际效果。

使用HTML / jQuery下拉选择

HTML PART

JQUERY PART

4 个答案: