how to onchange the select tag when add new select tag-CodePudding

Hey guys please help me with this problem I want to onchange the new added select tag. Here is my code

<div id="ugh">
<select onchange="handicap">
<option id=c1> Example (5)</option>
<option id="c2"> Example (10)</option>
</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 = '';

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');
var cap2 = document.getElementById('c2');

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

please help me with this problem. i want that when i add new select tag the onchange will apply.

CodePudding user response：

Instead of creating a string, try making a new element directly.

ako = document.createElement("select");

You can then add the onChange listener by setting the attribute for it.

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

The second parameter of the setAttribute function needs to be wrapped in a function so that it doesn't evaluate your handicap function right away.

CodePudding user response：

Here is my solution. I did change some ids and added a new div.

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

The new cloned elements are not identified by Javascript is because that are not in the DOM tree. So you will have to access them like this.

Also I used value attribute in select options rather than individual ids, which helps to reduce a lot of unnecessary code.

<script type="text/jajvascript">
    $('#sigepa').click(function(){
    // this is not in DOM
        var ako = '';
            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();

           // selecting the closest input element
           $(this).closest('.container').find('.cap').val(value);

     });
</script>

CodePudding user response：

You can try to build elements with jQuery. You can 'Run code snippet' to see demo.

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

    // Check already added select and input, return and do nothing
    if ($("#cap").length > 0) return;

    // build select element
    var select = $("<select>")
      .append($("<option>").prop("id", "c1").text("Example (5)"))
      .append($("<option>").prop("id", "c2").text("Example (10)"))
      .attr('onchange', 'handicap()');

    // build input element
    var input = $("<input>").prop("id", "cap").prop("type", "text");

    // append built items to #ugh
    $("#ugh").append(select).append(input);
  });

  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>
<div id="ugh">
</div>

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

<script>

</script>

<script>

</script>

CodePudding user response：

      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <div id="ugh">
       <select onchange="handicap()">
       <option id=c1> Example (5)</option>
       <option id="c2"> Example (10)</option>
  </select>
  <input id="cap" type="text">
  </div>
  <a id="sigepa" class="fa fa-clone" style="font-size:30px">link</a>
  <script>
    $('#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>
   function handicap(){
   console.log('hi');
   var cap1 = document.getElementById('c1');
   var cap2 = document.getElementById('c2');

   if(cap1.selected){
      document.getElementById('cap').value = 5;
     }
   else{
      document.getElementById('cap').value = 10;     
     }
     }
    function handicap2(){
      console.log('hi33');
      var cap1 = document.getElementById('c3');
      var cap2 = document.getElementById('c4');
      if(cap1.selected) {
       document.getElementById('cap1').value = 5;
       }
       else {
         document.getElementById('cap1').value = 10;     
        }
        }
    </script>

Every element in the HTML must have unique. Here for the newly created select options, you are giving the IDs that are already present. So changing the IDs is working as expected I guess once to verify it.