Javascript 使用HTML/jQuery的下拉选择

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

正如你在下面看到的，第一个选择是关于国家。如果所选国家有州，则将显示第二个下拉选择，其中包含该国家的州

1） 是否有一个标签（在我的代码“xyz”中），我可以用它来区分“状态”和“无状态”类别中的国家？如果有，如何读取“xyz”标记的值

2） 如果我使用：

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

HTML部分 我能做些什么来解决这个问题

---

谢谢。

我认为您可以使用

.data（）

jQuery方法，该方法读取

数据-*

一个有效的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>

德国
美国
西班牙

根据您的自定义属性

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();
      }
    });
});

---

使用class属性并没有那么糟糕：

HTML

---

首先，我要将您的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>

---

下面是一个例子，让我们看看它的实际效果。

它的工作方式就像我想要的那样！谢谢大家的回答，因为他们都工作正常。

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

$(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();
      }
    });
});

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

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

 <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);
});