how to change jquery drop down value

Question

On the basis of selection of Issue type i want to show 2nd drop down. if someone is select Board i want to show 2nd drop down and if someone select Branding i want to show different option. pls help

<label for="Issue Type">Issue Type</label>
            <select name="issue_type" id="issue_type">
                <option value=""> Select </option>
                <option value="Board">Board</option>
                <option value="Branding/Clipon">Branding/Clipon</option>
            </select>

<label for="Issue Type">Issue</label>
            <select name="send_to" id="send_to">
                <option value=""> Select </option>
                <option value="Light Not Working">Light Not Working</option>
                <option value="Broken Letter">Broken Letter</option>
                <option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
                <option value="Broken Board">Broken Board</option>
          </select>
          <select name="send_to" id="send_to">
                <option value=""> Select </option>
                <option value="Pasting Problem">Pasting Problem</option>
                <option value="Clip-on light not working">Clip-on light not working</option>
          </select>

Answer 1

In your select

<select name="issue_type" id="issue_type" onchange="change('issue_type');">

In your js file

$(document).ready(function(){
    function change(id) {
        //check condition if as
        if ($('#' + id).val() == 'Board') {
            //hide select except your required select
            //like 
            $("#send_to").show().siblings().hide();
        } else if () { // your next condition
            //so on
        }
    }
});

Answer 2

here's jquery

$(document).ready(function(){

    function changeVisibleSelect(elem){
        var vis = $(elem).val() == 'Board';

        $('#send_to' + (vis ? '_board' : '')).removeClass('hidden');
        $('#send_to' + (vis ? '' : '_board')).addClass('hidden');

    }
    $('#issue_type').change(function(){

        changeVisibleSelect(this);

    });
    changeVisibleSelect($('#issue_type'));

});

and minor edit to your html

<label for="Issue Type">Issue Type</label>
        <select name="issue_type" id="issue_type">
            <option value=""> Select </option>
            <option value="Board">Board</option>
            <option value="Branding/Clipon">Branding/Clipon</option>
        </select>

<label for="Issue Type">Issue</label>
        <select name="send_to" id="send_to">
            <option value=""> Select </option>
            <option value="Light Not Working">Light Not Working</option>
            <option value="Broken Letter">Broken Letter</option>
            <option value="Transit of Board from One address to Another">Transit of Board from One address to Another</option>
            <option value="Broken Board">Broken Board</option>
      </select>
      <select name="send_to" id="send_to_board">
            <option value=""> Select </option>
            <option value="Pasting Problem">Pasting Problem</option>
            <option value="Clip-on light not working">Clip-on light not working</option>
      </select>

i changed the id of second select

css:

.hidden{display:none}

here's working jsfiddle: http://jsfiddle.net/MXjmY/1/