如何拆分下拉串列選項的值并將其傳遞到兩個不同的輸入欄位中

如何拆分下拉串列選項的值并將其傳遞給兩個不同的輸入欄位腳本

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

uj5u.com熱心網友回復：

您的腳本中有幾個問題。順便說一句，有些人很嚴肅，表明你沒有掌握事件的概念。任何時候呼叫函式時都不應重新附加處理程式。我沒有真正明白這一點。$另外，當您使用jQuery時，您應該通過$(selector).

順便說一句，您只需要一個更改事件處理程式，在我的示例中，我通過 js 將其附加到元素，而不是使用行內定義（因為不建議這樣做）。

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

uj5u.com熱心網友回復：

您使用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">

uj5u.com熱心網友回復：

下拉框的 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>

標籤：javascript html django

上一篇：按位運算和箭頭函式回傳陳述句

下一篇：在Promise物件未渲染之后