Question

我有一个输入，当你keyup四个字符时有一个事件。错误发生在：

添加一行（有两个）
在第一行。写四个字符。选择填充虚拟选项。选择一个选项并在输入中写入文本。
排在第二排。写四个字符。选择填充虚拟选项。选择一个选项并在输入中写入值，然后选择我将文本。

问题在于

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

我该如何解决？我总是想要文本值，只放在第一行。

＆＃13;

$(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>')
    });
  
});

＆＃13;

 .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;
 }

＆＃13;

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

＆＃13;

Answer 1

我主要回答你问题的标题。不确定它是否能解决所有问题，但看起来你可以使用这个答案。

on（）方法允许您执行以下操作：$（container）.on（event，child_notes，function（）{...}）

那些child_notes可以是动态推送的数据。

示例：

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

Answer 2

解决。

我在选择时生成dinamically时更改代码。必须改变

onchange =＆＃39; this.nextElementSibling.value = this.value - ＆gt; this.nextElementSibling.value = this.options [this.selectedIndex]的.text

<。>在.js文件中

获取动态创建的选择的文本值

2 个答案: