How to set option value null When something is selected

This is my HTML Select box. When I choose Option Filter by Country then FIlter by Country Select box should appear and all of the state and local address select box should hide and when I select to filter by state then state select box should be appear and other should hide

<select id="filter by address">
<option value="none">All</option>
<option value="0">Filter by Country</option>
<option value="1">Filter by State</option>
<option value="2">Filter by Local Address</option>
</select>

<select id="local_address">
	<option>Select By Local Address</option>
</select>

<select id="country">
	<option>Select By Country</option>
</select>
<select id="state">
	<option>Select By State</option>
</select>

This is the Script file and When choose to filter by country then a country select box appears and another select box will hide but other state and local address option value does not become null

 $('#filter by address').change(function () {
        var address=$(this).val();
        
        if(address==1){
            $("#state").css("display","block");
            $("#country").css("display","none");
            $("#local_address").css("display","none");
            $('#local_address').val(null); //I want to  set them null if state is chooses
            $('#country').val(null); //I want to  set them null if state is chooses
        }else if (address==2){
            $("#local_address").css("display","block");
            $("#country").css("display","none");
            $("#state").css("display","none");
            $('#country').val(null);  //I want to  set them null if local_address is chooses
            $('#state"').val(null);  //I want to  set them null if local_address is chooses
        }else if (address==0){
            $("#country").css("display","block");
            $("#state").css("display","none");
            $("#local_address").css("display","none");
            $('#state').val(null);  //I want to  set them null if country  is chooses
            $('#local_address').val(null);  //I want to  set them null if country is chooses
        }else if(address=="none"){
            $("#country").css("display","none");
            $("#local_address").css("display","none");
            $("#state").css("display","none");
            $('#state').val(null);  //I want to  set them null if none is chooses
            $('#local_address').val(null);  //I want to  set them null if none is chooses
            $('#country').val(null);  //I want to  set them null if none is chooses
        }
    })

So my problem is how to set null other select box option ?

uksarkar

5 years ago

Level 2

Give a try to this changes

<select id="filter-by-address"> // set the id like this
<option value="">All</option> // set the value empty
<option value="0">Filter by Country</option>
<option value="1">Filter by State</option>
<option value="2">Filter by Local Address</option>
</select>

<select id="local_address">
	<option value="">None</option> // add one option with empty value
	<option>Select By Local Address</option>
</select>

<select id="country">
	<option value="">None</option> // add one option with empty value
	<option>Select By Country</option>
</select>
<select id="state">
	<option value="">None</option> // add one option with empty value
	<option>Select By State</option>
</select>

saurav77

5 years ago

Level 2

@uksarkar My problem is when I select some option then another select box should hide and its value should be null but in my case When I select to filter by country and select some country option and again when I click to filter by state then the country value should be null

uksarkar

5 years ago

Level 2

Here is a working demo https://codepen.io/uksarkar/pen/wvWaXLq

<select id="filter-by-address"> // set the id like this
    <option value="">All</option> // set the value empty
    <option value="0">Filter by Country</option>
    <option value="1">Filter by State</option>
    <option value="2">Filter by Local Address</option>
</select>

<div class="options">
    <select id="local_address">
        <option value="">None</option> // add one option with empty value
        <option>Select By Local Address</option>
    </select>
    
    <select id="country">
        <option value="">None</option> // add one option with empty value
        <option>Select By Country</option>
    </select>
    <select id="state">
        <option value="">None</option> // add one option with empty value
        <option>Select By State</option>
    </select>
</div>

<script>
    jQuery(function($){
        $("#filter-by-address").on('change', function(){
            let address = $(this).val();
            $(".options").children('select').each((i,el) => $(el).hide().val(""));
            if(address === "") return;
          
            switch (address) {
                case "0":
                    $("#country").show();
                    break;
            
                case "1":
                    $("#state").show();
                    break;
            
                case "2":
                    $("#local_address").show();
                    break;
            }
        });
    });
</script>

Please or to participate in this conversation.