jQuery：轉換textarea（用新行分隔）以選擇選項菜單

Question

這是演示jsfiddle

我已經試過了：

 $('.generate').click(function () { $('.inthis').text('<select class="select" id="' + $('.select-menu').val() + '"><option>' + $('.text-area').val().split('\\n') + '</option><option>' + $('.text-area').val().split('\\n') + '</option><option>' + $('.text-area').val().split('\\n') + '</option></select>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="Text1" type="text" value="option_one" class="select-menu"> <br> <textarea class="text-area" name="Text2" cols="40" rows="5" placeholder="enter one wdg in one line">green yellow blue</textarea> <br> <input class="generate" type="button" value="test" /> <br> <br> <div class="inthis"></div> 

但它沒有用。

我想像這樣：

<select class="select" id="option_one">
<option>green</option>
<option>yellow</option>
<option>blue</option>
</select>

Answer 1

 $('.generate').click(function() { var options = $('.text-area').val().split('\\n') $('.inthis').html('<select class="select" id="' + $('.select-menu').val() + '"><option>' + options[0] + '</option><option>' + options[1] + '</option><option>' + options[2] + '</option></select>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="Text1" type="text" value="option_one" class="select-menu"> <br> <textarea class="text-area" name="Text2" cols="40" rows="5" placeholder="enter one wdg in one line">green yellow blue</textarea> <br> <input class="generate" type="button" value="test" /> <br> <br> <div class="inthis"></div> 

使用.html()而不是.text()

Answer 2

首先，使用text()將設置元素的文本值。 如果要在其中創建一個新元素，則可以使用html()或append() ，或jQuery的任何其他DOM操作方法。 在下面的示例中，我使用了appendTo()因此我可以維護對添加的select的引用。

從那里，您可以按每一行split() textarea值，然后遍歷該數組以建立每行的值作為自己的option 。 嘗試這個：

 $('.generate').click(function() { var $select = $('<select class="select" id="' + $('.select-menu').val() + '" />').appendTo('.inthis'); var options = $('.text-area').val().split('\\n').map(function(value) { return '<option>' + value + '</option>'; }); $select.html(options.join('')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="Text1" type="text" value="option_one" class="select-menu"> <br> <textarea class="text-area" name="Text2" cols="40" rows="5" placeholder="enter one wdg in one line">green yellow blue</textarea><br> <input class="generate" type="button" value="test" /><br><br> <div class="inthis"></div> 

Answer 3

文本是名稱，建議不適用於html或jQuery對象。

我正在使用jQuery語法創建對象並忽略textarea中的空行

 $('.generate').on("click", function() { var $sel = $('<select />', { "class": "select", "id": $('.select-menu').val() }), opts = $('.text-area').val().split('\\n').map( function(val) { if (val) return $('<option/>', { "value": val, "text": val }); }); $sel.append(opts); $('.inthis').html($sel); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="Text1" type="text" value="option_one" class="select-menu"> <br> <textarea class="text-area" name="Text2" cols="40" rows="5" placeholder="enter one wdg in one line">green yellow blue</textarea> <br> <input class="generate" type="button" value="test" /> <br> <br> <div class="inthis"></div> 

Answer 4

試試這個：

 $('.generate').click(function () { var options = $('.text-area').val().split('\\n').map(function(value) { return '<option>' + value + '</option>'; }); $('.inthis').text('<select class="select" id="' + $('.select-menu').val() + '">' + options.join('') + '</select>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input name="Text1" type="text" value="option_one" class="select-menu"> <br> <textarea class="text-area" name="Text2" cols="40" rows="5" placeholder="enter one wdg in one line">green yellow blue</textarea> <br> <input class="generate" type="button" value="test" /> <br> <br> <div class="inthis"></div>