Как я могу разделить значение опции выпадающего списка и передать его в два разных поля ввода

Как разделить значение опции выпадающего списка и передать его в два разных скрипта полей ввода

<script>
function getsciname()
    {
    ("#selectsci").change(function() {
    var sciname = (this).val().split(',');
    ("#sid").val(sciname[0]);
    ("#sname").val(sciname[1]);
    }};
</script>

(выпадающий список) выберите код опции

<select id="scinameid" class="scinameclass" onchange="getsciname()">
    <option disabled="true" selected>-- Scientific name --</option>
    {% for getData in TaxonmyDistributionInsert %}
    <option value={{getData.id}},{{getData.ScientificName}}>{{getData.id}} - 
    {{getData.ScientificName}}</option>
    {% endfor %}
</select>

код поля ввода

<input type="text" style="font-size: 16px"  placeholder="Shrimp Prawn ID" name="ShrimpPrawnID" 
id="sid" />
<input type="text" style="font-size: 16px"  placeholder="Scientific Name" 
name="ScientificName" id="sname" />

Ваш обработчик события onchange для выпадающего поля должен быть таким, как показано ниже. Не нужно вызывать onchange внутри него еще раз.

В вашем html, привяжите функцию к событию onchange вашего выпадающего окна следующим образом,

<select id="scinameid" class="scinameclass" onchange="getscOptname(this)">

<script>
function getscOptname(e)
    {
        var selOpt = e.value.split(',');
        $('#sid').val(selOpt[0]);
        $('#sname').val(selOpt[1]);
    };
</script>

В вашем сценарии было несколько проблем. Кстати, некоторые из них были довольно серьезными и показали, что вы не поняли концепции событий. Вы не должны прикреплять обработчик каждый раз, когда вызывается функция. Я не совсем понял этот момент. Плюс, когда вы используете jQuery, вы должны делать это через объект $, как $(selector).

Кстати, вам нужен только один обработчик события изменения, и в моем примере я прикрепил его к элементу через js, а не использовал встроенное определение (потому что так делать не рекомендуется).

//on document ready
$(document).ready(()=>{
  //adds an handler to the change event on #sinameid
  $("#scinameid").change((e)=>{    
    let sciname = $(e.target).val().split(',');
    $("#sid").val(sciname[0]);
    $("#sname").val(sciname[1]);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="scinameid" class="scinameclass">
  <option disabled="true" selected>-- Scientific name --</option>
  <option value="1,Name1">Name1</option>
  <option value="2,Name2">Name2</option>
  <option value="3,Name3">Name3</option>
</select>

<input
 type="text"
 style="font-size: 16px"
 placeholder="Shrimp Prawn ID"
 name="ShrimpPrawnID" 
 id="sid" />
 
<input
  type="text"
  style="font-size: 16px"
  placeholder="Scientific Name" 
  name="ScientificName"
  id="sname" />

Либо вы используете onchange или метод jquery .change() проверьте это

JavaScript

function getsciname(e){
    var [val1, val2] = e.target.value.split(',');
    document.getElementById('input1').value = val1
    document.getElementById('input2').value = val2
};
<select id="select" onchange="getsciname(event)">
<option value="a, b">A, B</option>
<option value="c, d">C, D</option>
<option value="e, f">E, F</option>
</select>
<input type="text" id="input1">
<input type="text" id="input2">

JQuery

$(document).ready(function(){
    $('#select').change(function(e){
        var [val1, val2] = e.target.value.split(',')
        $('#input1').val(val1)
        $('#input2').val(val2)
    })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select">
<option value="a, b">A, B</option>
<option value="c, d">C, D</option>
<option value="e, f">E, F</option>
</select>
<input type="text" id="input1">
<input type="text" id="input2">

Вернуться на верх