1

課題タイプの選択に基づいて、2 番目のドロップダウンを表示したいと考えています。誰かがボードを選択している場合は、2 番目のドロップダウンを表示し、誰かがブランディングを選択している場合は、別のオプションを表示したいと考えています。助けてください

<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>
4

2 に答える 2

1

あなたのselect

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

あなたのjsファイルで

$(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
        }
    }
});
于 2013-10-01T07:55:47.003 に答える
0

ここに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'));

});

そしてあなたの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>

2番目の選択のIDを変更しました

CSS:

.hidden{display:none}

ここでjsfiddleが動作しています：http://jsfiddle.net/MXjmY/1/

于 2013-10-01T07:50:47.973 に答える