Question

i am using below script, need to change the value of 3 dropdown on the basis of first two, Currently it showing the same value to if i am changing the values in first dropdown. Here is the script—

<script type="text/javascript">

function changeprice(id){

    var value = id;

    if(value == ""){
         document.getElementById('price').value="";
         alert("Please select one valid word count");
         return false;
    }
    if(value == "Lessthan1000"){
        var newprice = "USD 290";
    }
    if(value == "Lessthan2000"){
        var newprice = "USD 540";
    }
    if(value == "Lessthan4000"){
        var newprice = "USD 1050";
    }
    if(value == "Lessthan6000"){
        var newprice = "USD 1900";
    }
    var eprice = newprice;

    document.getElementById('price').value = eprice;

}
</script>

<select name="sp" id="sp" class="servicecategory">
    <option value="" selected>Please Select...</option>
    <option value="Medical and Biomedical Manuscript Writing" <?php if($servicename == "Medical and Biomedical Manuscript Writing"){ echo(" selected=\"selected\""); } ?>>Medical and Biomedical Manuscript Writing</option>
    <option value="Medical and Biomedical Manuscript Rewriting" <?php if($servicename == "Medical and Biomedical Manuscript Rewriting"){ echo(" selected=\"selected\""); } ?>>Medical and Biomedical Manuscript Rewriting</option>
</select>

<select name="Word_Count" id="Word_Count" onChange="changeprice(this.value)">
    <option value="" selected>Please Select...</option>
    <option value="Lessthan1000">1 - 1000 words</option>
    <option value="Lessthan2000">1001 - 2000 words</option>
    <option value="Lessthan4000">2001 - 4000 words</option>
    <option value="Lessthan6000">4001 - 6000 words</option>
</select>

<tr>
    <td valign="top" align="right">Price:</td>
    <td width="5"></td>
    <td valign="top" align="left"><input type="text" name="price" id="price" value="" readonly="" size="20"><br /></td>
</tr>

Need to change the value once i selected the Medical and Biomedical Manuscript Rewriting in the first dropdown. any suggestion what to do now ? its working fine for Medical and Biomedical Manuscript writing– Thankyou

Answer 1

Here is a function that you can use as an onchange event:

HTML (notice the onchange event):

<select name="sp" id="sp" class="servicecategory" onChange="change_select_values(this.value)">

JS:

function change_select_values(val){
    var sel = document.getElementById('Word_Count');
    switch(val){
        case "Medical and Biomedical Manuscript Rewriting":
            sel.options.length = 0; // clear select options
            sel.options[0] = new Option('TEXT', 'VALUE');
            sel.options[1] = new Option('TEXT', 'VALUE');
            sel.options[2] = new Option('TEXT', 'VALUE');
            sel.options[3] = new Option('TEXT', 'VALUE');
            break;
        default:        
            sel.options.length = 0;
            sel.options[0] = new Option('1 - 1000 words', 'Lessthan1000');
            sel.options[1] = new Option('1001 - 2000 words', 'Lessthan2000');
            sel.options[2] = new Option('2001 - 4000 words', 'Lessthan4000');
            sel.options[3] = new Option('4001 - 6000 words', 'Lessthan6000');
    }
    changeprice(sel.options[0].value); // change input value
}