CODEWITHSUNDEEP
javascripthtmlcsshtml-select
notknown7777
notknown7777

Reputation: 419

Change items in a <select> onchange of another <select> element

So basically I have 2 <select> elements, and what I want is that the user selects a option in the first <select> and then the second <select> changes its options depending on what is selected. The second <select> is empty, and when the first<select> get changed it needs to add <options> to the second <select>.

HTML 1st select :

<select name="roof_width" onChange="getWidth(this.selectedIndex)" value="3" class="content_selectinput" id="select_width">
    <?php
        $i = 0;
        $x = 2;
        while(isset($dak_breedte[$i]))
        {
            if(isset($roof_width_index) && $roof_width_index == $i)
            {
                echo"<option value='$i' id='$i' selected='Selected'>".$dak_breedte[$i]." Meter </option>";
                $i++;
            }                   
            else
            {
                echo"<option value='$x'>".$dak_breedte[$i]." Meter</option>";
                $i++;
            }
        }
    ?>
</select>

HTML 2nd select :

<select name="NokBreedte" onClick="ridgeCheck()" value="3" class="content_selectinput" id="select_ridge" >
</select>

JavaScript :

function getWidth(index)
{
    ridge_min = index - 10;
    ridge_max = index + 10
    ridge_select = document.getElementById("select_ridge");
    for(i = 0; i <= 99; i++)
    {
        if(i < ridge_min || i > ridge_max)
        {
            ridge_select.add(ridge_values[i]);
        }
    }
}

The text values for the second <select> are stored in an array. I searched the web for a while and also tried it with jQuery, but nothing works.

To be clear, what I need is :

When a user changes the first <select> the second <select> needs to change directly.

Upvotes: 0

Views: 3548

Answers (2)

Likurg
Likurg

Reputation: 2760

At first you need to delete all old values (all code you should use in onChange's function)

//Clear the HTML Select DropdownList
$('#select_ridge option').empty();

});

after you need to add new values 

    var listvalues= new Array();    
    listvalues[0] = { Text: "val1", Value: "1" };
    listvalues[1] = { Text: "val2", Value: "2" };    
    listvalues[2] = { Text: "val3", Value: "3" };    

    $.each(listvalues, function (index) {            
            $("#select_ridge").append(GetOption(listvalues[index].Text, listvalues[index].Value));        
            });    
    });    
    function GetOption(text, value) {        
            return "<option value = '" + value + "'>" + text + "</option>"    
    }

Upvotes: 0

Ankit
Ankit

Reputation: 1887

if you are using jquery replace your function with this one

function getWidth(){
    var index = $('#select_width').val();
    ridge_min = index - 10;
    ridge_max = index + 10

    var options = '';


    for(i = 0; i <= 99; i++)
    {
        if(i > ridge_min || i < ridge_max)
        {
            options += "<option>" + ridge_values[i] + "</option>";
        }
     }

     $('#select_ridge').html(options);
}

Also change

getWidth(this.selectedIndex)

to

getWidth()

Update

Sorry modified again but you have used the following condition wrong.

if(i < ridge_min || i > ridge_max)

should be 

if(i > ridge_min || i < ridge_max)

Upvotes: 2

Related Questions