Question

在选择问题类型的基础上，我希望显示第二次下拉。如果有人选择Board我想显示第二次下拉，如果有人选择Branding我想显示不同的选项。请帮忙

<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

在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
        }
    }
});

Answer 2

这是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/

如何更改jquery下拉值

2 个答案: