當添加新的選擇標簽時，如何改變選擇標簽？

大家好，請幫助我解決這個問題，我想改變新增加的選擇標簽。以下是我的代碼

<div id="ugh">
<select onchange="handicap"> >。
<option id=c1>  示例（5）</option>
<option id="c2"/span>>  示例(10)</option>/span>
</select>>
< input id="cap" type="text">
</div>>
< a id="sigepa"  class="fa fa-clone" style="font-size。 30px"></a> 

<script> 
$('#sigepa').click(function(){
var ako = ''/span>;

ako  = '<select onchange="handicap();"> ';
ako  = '<option id="c1"> Example (5)</option> ' ;
ako  = '<select id="c2"> Example (10)</option> ';
ako  = '</select>'。
ako  = '<input id="cap" type="text"> ';
$('#ugh').append(ako);
});
</script>>

<script>
function handicap()
{
var cap1 = document.getElementById('c1'/span>)。
var cap2 = document.getElementById('c2') 。

if(cap1.selected)
{
 document.getElementById('cap').value = 5;
}
else; }
{
 document.getElementById('cap').value =10;     
}

</script>

請幫助我解決這個問題。我希望當我添加新的選擇標簽時，onchange將被應用。

uj5u.com熱心網友回復：

不要創建一個字串，試著直接創建一個新的元素。

ako = document.createElement("select") 。

然后你可以通過為它設定屬性來添加onChange監聽器。

ako. setAttribute("onchange", function(){handicap()}) 。

setAttribute函式的第二個引數需要被包裹在一個函式中，這樣它就不會馬上評估你的handicap函式。

uj5u.com熱心網友回復：

這是我的解決方案。我確實改變了一些id，并添加了一個新的div。

<div id="ugh">
  <div class="container"> 
        <select class="handicap"> 
              <option value="5"/span>>  示例(5)</option>>
              <option value="10"/span>>  示例(10)</option>>
        </select> 
        < input class="cap" type="text">
  </div>/span>

新的克隆元素不能被Javascript識別，是因為它們不在DOM樹中。所以你將不得不像這樣訪問它們。

同時我在選擇選項中使用了value屬性，而不是單獨的id，這有助于減少很多不必要的代碼。

<script type="text/jajvascript"/span>>
    $('#sigepa').click(function(){
    //this is not in DOM.
        var ako = ''/span>;
            ako  = '<div class="container"> ';
            ako  = '<select class="handicap">';
            ako  = '<option value="5"> Example (5)</option> ' ;
            ako  = '<option value="10"> Example (10)</option> ';
            ako  = '</select>'。
            ako  = '<input class="cap" type="text">';
            ako  = '</div> ';
            $('#ugh').append(ako)。
    });

    $(document).on("change", " 。 handicap", function () {

           var value = $(this).val() 。

           //選擇最接近的輸入元素。
           $(this).closest(' .container')。 find('.cap').val（value）。

     });
</script>

uj5u.com熱心網友回復：

你可以嘗試用jQuery構建元素。你可以通過 "運行代碼片段 "來查看演示。

$(document)。 ready(function () {
  $("#sigepa").click(function () {

    //檢查已經添加的選擇和輸入，回傳并不做任何事情。
    if ($("#cap").length > 0) return;

    //建立選擇元素。
    var select = $("<select>")
      .append($("<option>") 。 prop("id", "c1").text("示例(5)")
      .append($("<option>") 。 prop("id", "c2").text("示例(10)")
      .attr('onchange', 'handicap() ')。

    //建立輸入元素。
    var input = $("<input>").prop("id", "cap") 。 prop("type", "text") 。

    //append built items to #ugh.
    $("#ugh").append（選擇）.append（輸入）。
  });

  handicap = function () {
    var cap1 = document.getElementById("c1") 。
    var cap2 = document.getElementById("c2") 。

    if (cap1.selected) {
      document.getElementById("cap").value = 5;
    } else {
      document.getElementById("cap").value =10;
    }
  };
});

<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<div id="ugh">
</div>/span>

< a id="sigepa"  class="fa fa-clone" style="font-size。 30px">sigepa</a>/span>

<script>/span>

</script>/span>

<script>/span>

</script>/span>

uj5u.com熱心網友回復：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
  <div id="ugh">
       <選擇onchange="handicap()">
       <option id=c1> 示例(5)</option>
       <option id="c2"> 示例（10）</option>
  </select>
  <input id="cap" type="text">
  </div>
  <a id="sigepa" class="fa-clone" style="font-size:30px" >link</a>
  <腳本>
    $('#sigepa').click(function(){
    var ako = '';
    ako  = '<select onchange="handicap2();">' 。
    ako  = '<option id="c3"> Example (5)</option>' 。
    ako  = '<option id="c4"> Example (10)</option>';
    ako  = '</select>'。
    ako  = '<input id="cap1" type="text"> ';
    $('#ugh').append(ako)。
    });
</script>
<script>
   函式 handicap(){
   console.log('hi')。
   var cap1 = document.getElementById('c1');
   var cap2 = document.getElementById('c2');

   如果(cap1.selected){
      document.getElementById('cap').value = 5;
     }
   否則{
      document.getElementById('cap').value = 10;     
     }
     }
    函式handicap2(){
      console.log('hi33')。
      var cap1 = document.getElementById('c3');
      var cap2 = document.getElementById('c4');
      如果(cap1.selected){
       document.getElementById('cap1').value = 5;
       }
       否則 {
         document.getElementById('cap1').value = 10;     
        }
        }
    </script>

HTML中的每個元素都必須具有唯一性。在這里，對于新創建的選擇選項，你給出的是已經存在的ID。因此，改變ID的作業是符合預期的，我想只要驗證一下就可以了。

標籤：

上一篇：如何每次都數到5而不是1

下一篇：DOM元素資料集包含有（這個）引數的呼叫