¿Cómo puedo dividir el valor de una opción de lista desplegable y pasarlo en dos scripts de campos de entrada diferentes?
<script> function getsciname() { ("#selectsci").change(function() { var sciname = (this).val().split(','); ("#sid").val(sciname[0]); ("#sname").val(sciname[1]); }}; </script>(desplegable) seleccione el código de opción
<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>código de cuadro de entrada
<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" />Tuviste varios problemas en tu guión. Por cierto, algunos fueron bastante serios y demostraron que no captabas los conceptos de eventos. No debe volver a adjuntar el controlador cada vez que se llame a la función. Realmente no entendí ese punto. Además, cuando usa jQuery, debe hacerlo a través del objeto $ como $(selector) .
Por cierto, solo necesita un controlador de eventos de cambio y, en mi ejemplo, lo adjunté al elemento a través de js en lugar de usar la definición en línea (porque no se recomienda de esa manera).
//on document ready $(document).ready(()=>{ //adds an handler to the change event on #sinameid $("#scinameid").change((e)=>{ //this will work as long as the only comma used is for separation let sciname = $(e.target).val().split(','); console.log(sciname); $("#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> <option value="4,Name//with space//4">(4) Option with spaces</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" />O usa el método onchange o jquery .change() verifique esto
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"> $(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">Su controlador de eventos onchange para el cuadro desplegable debería ser como el siguiente. No necesita llamar al onchange dentro de él una vez más.
En su html, vincule la función al evento de cambio de su cuadro onchange de esta manera,
<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>