1

在选择问题类型的基础上，我想显示第二个下拉菜单。如果有人选择董事会，我想显示第二个下拉菜单，如果有人选择品牌，我想显示不同的选项。请帮忙

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

我更改了第二个选择的 id

CSS：

.hidden{display:none}

这是工作的jsfiddle：http: //jsfiddle.net/MXjmY/1/

于 2013-10-01T07:50:47.973 回答