jQuery：转换textarea（用新行分隔）以选择选项菜单

Question

this the demo jsfiddle

I have tried this :

 $('.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> 

but it did not work.

I want to be like this :

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

use .html() not .text()

Answer 2

Firstly, using text() will set the textual value of the element. If you want to create a new element within it then you can use html() , or append() , or any of jQuery's other DOM manipulation methods. In the example below I used appendTo() so I can maintain a reference to the select that was added.

From there you can split() the textarea value by each line and then loop through that array to build each lines' value as its own option . Try this:

 $('.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

Text is as the name suggest not working for html or jQuery objects.

I am using the jQuery syntax on creating the objects and ignoring empty lines in the 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

Try this one:

 $('.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>