Jquery 基于属性的条件下拉列表

Question

我需要根据第一个 select 列表的值显示/隐藏 select 列表的选项，但我不能使用第二个列表的值我需要使用数据属性或者别的什么，我从一个片段中尝试这个，我发现它对值很有效，但似乎我滥用了数据方法

我给你看我的 Html 和 js :

$(document).ready(function() {
    var optarray = $("#group").children('option').map(function() {
        return {
            "data": this.data,
            "option": "<option data='" + this.data + "'>" + this.text + "</option>"
        }
    })
        
    $("#type").change(function() {
        $("#group").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].data.indexOf($(this).data()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#group").html(addoptarr.join(''))
    }).change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="type" id="type">
    <option value="">Choose a Type</option>
    <option value="music">Music</option>
    <option value="art">Art</option>
    <option value="cook">Cook</option>
</select>

<select name="group" id="group">
    <option value="">Choose a group</option>
    <option value="band" data="music">Band</option> 
    <option value="guitarplayer" data="music">Guitar Player</option> 
    <option value="painter" data="art">Painter</option>
    <option value="graffer" data="art">Graffeur</option>
    <option value="chief" data="cook">Chief</option>
</select>

谢谢大家（和姑娘们 (:)

Answer 1

尝试用 "data": $(this).attr("data") 代替 "data": this.data, ；将 .get() 链接到 .map() 到 return 数组而不是 jQuery 对象；在 for 初始化时用 i = 1 替换 i = 0 ，以从迭代中删除没有值 <option value="">Choose a Type</option> 的 option ；在 for 语句中用 .indexOf($(this).val()) 代替 .indexOf($(this).data())

$(document).ready(function() {
    var optarray = $("#group").children('option').map(function() {
        return {
            "data": $(this).attr("data"),
            "option": "<option data='" + $(this).attr("data") + "'>" + this.textContent + "</option>"
        }
    }).get();
        
    $("#type").change(function(e) {
        $("#group").children("option").remove();
        var addoptarr = [];
        for (i = 1; i < optarray.length; i++) {
         console.log(optarray[i].data, optarray[i].option)
            if (optarray[i].data.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
      console.log(addoptarr)
        $("#user_job_title_str").html(addoptarr.join(""))
    }).change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<select name="type" id="type">
    <option value="">Choose a Type</option>
    <option value="music">Music</option>
    <option value="art">Art</option>
    <option value="cook">Cook</option>
</select>

<select name="group" id="group">
    <option value="">Choose a group</option>
    <option value="band" data="music">Band</option> 
    <option value="guitarplayer" data="music">Guitar Player</option> 
    <option value="painter" data="art">Painter</option>
    <option value="graffer" data="art">Graffeur</option>
    <option value="chief" data="cook">Chief</option>
</select>

<select id="user_job_title_str"></select>

Jquery 基于属性的条件下拉列表

Jquery conditional drop down list based on attributes

jquery

drop-down-menu

selectlist