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

首先，使用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 2

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

文本顾名思义不适用于 html 或 jQuery 对象。

我使用 jQuery 语法创建对象并忽略文本区域中的空行

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