How can i split the value of a dropdown list option and pass it in two different input fields scripts

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

(dropdown) select option code

<select id="scinameid"  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 box code

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

CodePudding user response：

You had several problems in your script. By the way some were pretty serious and showed that you didn't grasp the concepts of events. You shouldn't reattach the handler any time the function was called. I didn't really get that point. Plus when you use jQuery you should do it through the $ object like $(selector).

By the way you just need one change event handler and in my example I attached it to the element via js instead of using the inline definition (because it's not recommended that way).

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

CodePudding user response：

Either you use onchange or jquery .change() method check this

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

CodePudding user response：

Your onchange event handler for the drop down box, should be like below. Need not call the onchange inside it once again.

In your html, bind the function to your dropdown box' onchange event like so,

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

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