Question

我需要根据第一个选择列表的值显示/隐藏选择列表的选项但是我不能使用我需要使用数据属性或其他东西的第二个值，我从一个片段中尝试这个我发现在值上运行正常，但似乎我误用了数据方法

我告诉你我的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>

Thx家伙（和女孩们:(））

Answer 1

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

＆＃13;

.indexOf($(this).data())

＆＃13;

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

＆＃13;

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

1 个答案: