通過選擇一個下拉菜單顯示兩個不同的值

Question

我想在兩個不同的輸入框中顯示兩個值。 例如，如果選擇“ A”，則兩個輸入框應在第一個輸入框中顯示“ a”，在第二個輸入框中顯示“ 01”。 但是我的概念僅顯示“ a”而不顯示“ 01”。

HTML：

<select name="test" id="test" onchange="trying()" onchange="trying2()">
    <option value="" >Select</option>
    <option value="a">A</option>
    <option value="b">B</option>
</select> 

<input type="text" name="display" id="display" />
<input type="text" name="display2" id="display2" />

腳本：

function trying() {
    document.getElementById("display").value = document.getElementById("test").value;
}

function trying2() {
    if (option.value == "a") {
        document.getElementById("display2").value = 01;
    }
}

Answer 1

嘗試像這樣更改選擇的“ onchange”：

 <select name="test" id="test" onchange="trying();trying2();"> <option value="" >Select</option> <option value="a">A</option> <option value="b">B</option> </select> 

您的“ trying2”腳本應如下所示：

    function trying2() {
        if (document.getElementById("test").value == "a") {
            document.getElementById("display2").value = 01;
        }
    }

而且，如果您想使用JQuery，則可以這樣做，（請記住刪除onchange =“ trying（）; trying2（）;”）：

    $(document).ready(function() {
        $('#test').on('change', function () {

            var myVal = $('#test').val();
            $('#display').val(myVal);
            if (myVal == 'a') { $('#display2').val(myVal); }
            else { $('#display2').val(''); }

        });
    });

Answer 2

將這兩個功能合並為一個，如下所示：

var selector = document.getElementById("test");    
function trying() {
  var selectVal = selector.value;
  document.getElementById("display").value = selectVal;
  document.getElementById("display2").value = selectVal == "a" ? "01" : "";
}

selector.addEventListener("change", trying);

Codepen上的演示

除非沒有其他方法，否則不鼓勵PS內聯事件處理程序。

Answer 3

您不能擁有兩個具有相同名稱（onchange）的屬性，只有一個正在應用。 你可以做幾件事

• 從一個onchange屬性調用兩個函數
• 使用addEventListener添加多個處理程序

• $('#test').on('change', trying).on('change', trying2)

第二個問題是

function trying2() {
    // "option" is not defined
    if (option.value == "a") {
        document.getElementById("display2").value = 01;
    }
}

應該

function trying2() {
    if (document.getElementById("test").value == "a") {
        document.getElementById("display2").value = 01;
    }
}

Answer 4

你這樣做：

<input id"abc"/>
<input id"cde"/>

然后用jQuery：

$("#abc").val("a");
$("#cde").val("01");