Отобразите два разных значения, выбрав один раскрывающийся список

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

SCRIPT:

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 = "пытается (); 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

Вы не можете иметь два атрибута одного и того же имени (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 3

вы делаете это так:

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

, а затем с JQuery:

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

Answer 4

Объединение этих 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); 

Демо on codepen

P.S. inline обработчики событий не поощряются, если нет другого пути вокруг него.