更新 select 选项的值

Question

我的文本框的值如何根据用户选择的选项更新或更改？因为目前，当我首先在 Dropdown1 中选择一个选项然后在 Dropdown2 中选择一个选项时，一个值将显示在我的文本框中，但是如果我在 dropdown1 上更改我的选择，文本框中的值将不会改变，除非，我在我的 Dropdown2 上再次重新选择。

    <select name="menu" id="select1">
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                </select>
                <select name="menu2" id="select2" onchange="changetxt3()"> 
                        <option value="1">1</option>
                        <option value="2">2</option>
                </select>

                <input type="text" id="txt6"/>

**jquery**

    $(document).ready(function(){
    $("#select1").change(function(){
        if($(event.target).val() == 'A'){
                $("#select2").change(function(){
                    if($(event.target).val() == '1'){
                        $('#txt6').val('250.00');
                    }else{
                        $('#txt6').val('250.00');
                    }
                }); 
            }else if($(event.target).val() == 'B'){
                $("#select2").change(function(){
                    if($(event.target).val() == '1'){
                        $('#txt6').val('50.00');
                    } else{
                        $('#txt6').val('50.00');
                    }
                });
                }else
                if($(event.target).val() == 'C'){
                    $("#select2").change(function(){
                    if($(event.target).val() == '1'){
                        $('#txt6').val('103.00');
                    } else{
                        $('#txt6').val('103.00');
                    }
                });
            }else
        {
            $("#select2").change(function(){
                    if($(event.target).val() == '1'){
                        $('#txt6').val('186.00');
                    } else{
                        $('#txt6').val('186.00');
                    }
                });
        }
    });
});

查看 jsfiddle

jsFiddle

Answer 1

不要认为这是冒犯，但您的代码非常有毒，所以我对它进行了一点修改。

$(function() {
    var val1, val2;
    $("#select1").change(function() {
        switch ($(event.target).val())
        {
            case 'A':
                val1 = '250.00';
                val2 = '250.00';
                break;
            case 'B':
                val1 = '50.00';
                val2 = '50.00';
                break;
            case 'C':
                val1 = '103.00';
                val2 = '103.00';
                break;
            default:
                val1 = '186.00';
                val2 = '186.00';
                break;
        }
        update();
    });
    
    $("#select2").change(function(event) {
        update();
    });
    
    function update()
    {
        if ($('#select2').val() == '1')
        {
            $('#txt6').val(val1);
        } else {
            $('#txt6').val(val2);
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="menu" id="select1">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>
<select name="menu2" id="select2" onchange="changetxt3()"> 
    <option value="1">1</option>
    <option value="2">2</option>
</select>
    
    <input type="text" id="txt6"/>

市场上有那么多精彩的 IDE，甚至像 Notepad++ 这样简单的东西，我很惊讶人们甚至不能正确缩进。

在 $('#select1') 更改时，原始代码中未调用任何会更改文本框值的内容。在这种情况下，我添加了一个函数来调用。要在更改 $('#select2') 时在文本框中看到内容，您需要 val1 和 val2 不同。我没有让它们有所不同，因为你没有使用你的原始代码。

更新 select 选项的值

Update a value on select of option

html

jquery