简体   繁体   中英

get the text value of a select created dynamically

I have an input, with have an event when you keyup four characters. the error happens when:

  1. Add one row (have two)
  2. in first row. Write four characters. The select fill with dummy options. select one option of select and write the text in input.
  3. in second row. Write four characters. The select fill with dummy options. Select one option of select and write the value in input, and I will the text .

the problem is there

<select onchange="this.nextElementSibling.value=this.options[this.selectedIndex].text">

How can I solve it? I want always the text value, and only put in the first row.

 $(document).ready(function() { var wrapper = $("#table-editable"); //Fields wrapper $(".delete").on('click', function() { $('.case:checkbox:checked').parents("tr").remove(); $('.check_all').prop("checked", false); check(); }); var i=1; $(".addmore").on('click',function(){ count=$('table tr').length; var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>"; data +="<td><div class='select-editable'><select onchange='this.nextElementSibling.value=this.value' name='mytext' id='mytext"+i+"'><option value=''></option><option value='115x175 mm'>115x175 mm</option></select><input type='text' name='input' id='input"+(count)+"' value='' /></div></td></tr>"; $('table').append(data); i++; }); function select_all() { $('input[class=case]:checkbox').each(function(){ if($('input[class=check_all]:checkbox:checked').length == 0){ $(this).prop("checked", false); } else { $(this).prop("checked", true); } }); } function check(){ obj=$('table tr').find('span'); $.each( obj, function( key, value ) { id=value.id; $('#'+id).html(key+1); }); }; wrapper.on('keypress', 'input', function () { var cs = $(this).val().length+1; console.log( "total caracters:" + cs, $(this)); $(this).prev().html('<option value="1">dummy01</option><option value="2">dummy02</option><option value="3">dummy03</option>') }); }); 
  .select-editable { position: relative; background-color: white; border: solid grey 1px; width: 350px; height: 18px; } .select-editable select { position: absolute; top: 0px; left: 0px; font-size: 14px; border: none; width: 350px; margin: 0; } .select-editable input { position: absolute; top: 0px; left: 0px; width: 330px; padding: 1px; font-size: 12px; border: none; } .select-editable select:focus, .select-editable input:focus { outline: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id='students' method='post' name='students' action='index.php'> <table border="1" cellspacing="0" id="table-editable"> <tr> <th><input class='check_all' type='checkbox' onclick="select_all()"/></th> <th>S. No</th> <th>First Name</th> </tr> <tr> <td><input type='checkbox' class='case'/></td> <td><span id='snum'>1.</span></td> <td> <div class="select-editable"> <select onchange="this.nextElementSibling.value=this.options[this.selectedIndex].text" name="mytext" id="mytext"> <option value=""></option> <option value="115x175 mm">115x175 mm</option> <option value="120x160 mm">120x160 mm</option> <option value="120x287 mm">120x287 mm</option> </select> <input type="text" name="input" id="input1" value="" /> </div> </td> </table> <button type="button" class='delete'>- Delete</button> <button type="button" class='addmore'>+ Add More</button> <p> <input type='submit' name='submit' value='submit' class='but'/></p> </form> 

I'l respond mostly on the title of your question. Not sure if it solves everything, but it looks like you could use this answer.

The on() method permits you to do do the following: $(container).on(event, child_notes, function(){ ... })

Those child_notes can be dynamically pushed data.

example:

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#myselect').on('click', 'option', function(e) {
        var message = ' clicked on: ' + $(this).html() ;
        $('#log').html(message);
      });
    });
    function fill_select() {
      var options = ['apple', 'lemon', 'banana'];
      var innerHtml = '';
      for(var i in options) {
        innerHtml += '<option value="'+ i +'">'+ options[i] +'</option> ';
      }
      $('#myselect').html(innerHtml);        
    }
  </script>
  <select id="myselect" name="fruit"></select>
  <br/>
  Click button to fill in the select: 
  <input type="button" value="click" onclick="fill_select()"/>
  <p id="log"></p>
  <style>
    p {
      border: 1px solid #000;
      padding: 3px;
    }
  </style>
<body>

solved.

I change the code when generate dinamically the select. must change

onchange='this.nextElementSibling.value=this.value --> this.nextElementSibling.value=this.options[this.selectedIndex].text

in .js file

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM