獲取一個動態創建的select的文本值

我有一個輸入，當有keyup四個字符時有一個事件。錯誤發生時：獲取一個動態創建的select的文本值

添加一行（有兩個）
在第一行。寫四個字符。選擇填充虛擬選項。選擇一個選擇選項並在輸入中寫入文本。
第二行。寫四個字符。選擇填充虛擬選項。選擇一個選項，並在的值中輸入，然後我將文本。

的問題是有

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

我該如何解決呢？我總是希望獲得文本值，只能放在第一行。

$(document).ready(function() { 
 
var wrapper = $("#table-editable"); //Fields wrapper 
 

 

 
$(".delete").on('click', function() { 
 
\t $('.case:checkbox:checked').parents("tr").remove(); 
 
    $('.check_all').prop("checked", false); 
 
\t check(); 
 
}); 
 

 
var i=1; 
 
$(".addmore").on('click',function(){ 
 
\t 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>"; 
 
\t $('table').append(data); 
 
\t i++; 
 
}); 
 

 
function select_all() { 
 
\t $('input[class=case]:checkbox').each(function(){ 
 
\t \t if($('input[class=check_all]:checkbox:checked').length == 0){ 
 
\t \t \t $(this).prop("checked", false); 
 
\t \t } else { 
 
\t \t \t $(this).prop("checked", true); 
 
\t \t } 
 
\t }); 
 
} 
 

 
function check(){ 
 
\t obj=$('table tr').find('span'); 
 
\t $.each(obj, function(key, value) { 
 
\t id=value.id; 
 
\t $('#'+id).html(key+1); 
 
\t }); 
 
\t }; 
 
    
 
    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>

來源

2017-06-21 occiso

其' textContent'不是'文本' – prasanth

I'l大多回應你的問題的標題。不知道它是否解決了所有問題，但看起來你可以使用這個答案。

的（）方法允許你做做到以下幾點：$（容器）。在（事件，child_notes，函數（）{...}）

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

來源

2017-06-21 14:20:57

我不需要收取選擇。可視化問題。「運行代碼snipet」並創建一個新行。排行你推四個字符，選擇填充虛擬列表。您選擇並看到文本值。但是，如果您對第二行執行相同的操作，則可以選擇值intead文本值 – occiso

解決。

我更改代碼生成Dinamically選擇。必須改變

平變化='this.nextElementSibling.value = THIS.VALUE - > this.nextElementSibling.value = this.options [this.selectedIndex]的.text

在js文件

來源

2017-06-23 07:19:47 occiso

獲取一個動態創建的select的文本值

回答

相關問題