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

Question

这是demo 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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

使用.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

Text就像名称建议不适用于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

试试这个：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;