Jquery conditional drop down list based on attributes

Question

I need to Show / Hide options of select list based on the value of a first select list but I can't use the value of the second one I need to use data attributes or something else, I try this from a snippet I found that works fine on values but it seems that I misuse the data method

I Show you my Html and 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 guys (and girls (:)

suggest you start by reading the API docs for jQuery.data(). Usage is wrong in markup as well as this.data and this.text are undefined. this will be a DOM element. Using your console to look a errors will help — charlietfl
– charlietfl, Commented Aug 18, 2015 at 0:38

guest271314 · Accepted Answer · 2015-08-18 01:01:24Z

Try substituting "data": $(this).attr("data") for "data": this.data, ; chaining .get() to .map() to return array instead of jQuery object ; substituting i = 1 for i = 0 at for initialization , to remove option not having value <option value="">Choose a Type</option> from being iterated ; within for statement substituting .indexOf($(this).val()) for .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>

Collectives™ on Stack Overflow

Jquery conditional drop down list based on attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related