CODEWITHSUNDEEP
javascriptjquery
Paulius Rutkauskas
Paulius Rutkauskas

Reputation: 37

jQuery show/hide options if first one selected, shows second selected option by default

If I selected 3 column I want to get default value - layout 4

selected="selected" this works only in column_select but does not work in second layout_select form.

What/where I should add or change in code?

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })
        
    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <option value="col1">none</option>
    
    <!--Below shows when '2 column' is selected is hidden otherwise-->
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option>
    
    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <option value="col3_mss">layout 3</option>
    <option value="col3_ssm" selected="selected">layout 4</option>
    <option value="col3_sms">layout 5</option>
</select>

Upvotes: 3

Views: 174

Answers (3)

charlietfl
charlietfl

Reputation: 171669

Simpler approach using clone() and filter().

You store a cloned set of the options on page load. For each change you clone that stored set again and filter it based on value selected.

var $clonedOpts = $("#layout_select").children().clone();

$("#column_select").change(function() { 
  var $layOpts = $clonedOpts.clone().filter('[value^=' + $(this).val() + ']');
  $("#layout_select").html($layOpts);
}).change();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="column_select" id="column_select">
  <option value="col1">1 column</option>
  <option value="col2">2 column</option>
  <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
  <!--Below shows when '1 column' is selected is hidden otherwise-->
  <option value="col1">none</option>

  <!--Below shows when '2 column' is selected is hidden otherwise-->
  <option value="col2_ms">layout 1</option>
  <option value="col2_sm">layout 2</option>

  <!--Below shows when '3 column' is selected is hidden otherwise-->
  <option value="col3_mss">layout 3</option>
  <option value="col3_ssm" selected="selected">layout 4</option>
  <option value="col3_sms">layout 5</option>
</select>

Upvotes: 1

vnsharetech Phong Nguyen
vnsharetech Phong Nguyen

Reputation: 101

https://codepen.io/phong18/pen/aboLdGG Update your js: 

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        var selected = '';
        if($(this).attr('selected')){
            selected = "selected='"+ $(this).attr('selected')+"'";
        }
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "' "+selected+" >" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})

Upvotes: 2

mplungjan
mplungjan

Reputation: 177940

Save the selected status too

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": `<option value="$(this.value}"${this.defaultSelected?" selected":""}>${this.text}</option>`,
        }
    })
        
    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="column_select" id="column_select">
    <option value="col1">1 column</option>
    <option value="col2">2 column</option>
    <option value="col3">3 column</option>
</select>

<select name="layout_select" id="layout_select">
    <!--Below shows when '1 column' is selected is hidden otherwise-->
    <option value="col1">none</option>
    
    <!--Below shows when '2 column' is selected is hidden otherwise-->
    <option value="col2_ms">layout 1</option> 
    <option value="col2_sm">layout 2</option>
    
    <!--Below shows when '3 column' is selected is hidden otherwise-->
    <option value="col3_mss">layout 3</option>
    <option value="col3_ssm" selected="selected">layout 4</option>
    <option value="col3_sms">layout 5</option>
</select>

Upvotes: 1

Related Questions