Question

任何人都可以帮助我解决这个问题。感谢所有试图帮助我的人，所以这是来自数据库的文本我是#OPTION，我#OPTION岁了。我有下拉，我可以用追加显示，但它们只出现在整个句子之后我需要下拉来替换#OPTION这是我的下拉代码

<script type="text/javascript">
$(document).ready(function () {
$(" p").append('<div class="btn-group"><select type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ><option value="volvo">{{$answer->text}}</option></select></div>');});

</script>

所以p保留了我的文字I am #OPTION and I am #OPTION years old.，这就是为什么最后会出现下拉菜单，我尝试了$(" #OPTION ").append( ..这样的事情但是没有用，有人可以帮助我如何用#OPTION替换下拉列表.. 我需要它像这样：

 I am [appear drop-down]  and I am [appear drop-down] years old.

Answer 1

HTML：

<p>
    I am #OPTION and I am #OPTION years old.
</p>

JS：

$(document).ready(function () {
    var value = $('p').html();

    var valueWithDropdowns = value.replace(
        new RegExp('#OPTION', 'g'),
        '<div class="btn-group"><select type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" ><option value="volvo">{{$answer->text}}</option></select></div>'
    );

    $("p").html(valueWithDropdowns);
});

我在替换函数中使用了正则表达式来替换给定字符串中出现的所有#OPTION。

如果要为每个占位符使用不同的下拉列表，则需要使用不同的占位符，例如＃OPTION_1，＃OPTION_2，并使用字符串替换功能替换每个占位符。

Answer 2

这是另一种方式。大量硬编码，但易于修改以动态创建。

＆＃13;

const nameSelect = $('<select></select>');
const person1 = $('<option value="person1">Person 1</option>');
const person2 = $('<option value="person2">Person 2</option>');
nameSelect.append(person1);
nameSelect.append(person2);

const ageSelect = $('<select></select>');
const age1 = $('<option value="6">6</option>');
const age2 = $('<option value="25">25</option>');
ageSelect.append(age1);
ageSelect.append(age2);

$('#dropdowns').append('I am ');
$('#dropdowns').append(nameSelect);
$('#dropdowns').append(' and I am ');
$('#dropdowns').append(ageSelect);
$('#dropdowns').append(' years old.');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowns"></div>

＆＃13;

编辑（动态创建值）：

＆＃13;

const defaultOption = optionType => (
  $(`<option disabled selected value> -- select ${optionType} -- </option>`)
);

const names = ['Sally', 'Bill', 'Charlotte', 'Stephanie', 'Harry', 'John', 'Julia', 'Albert'];
const nameSelect = $('<select></select>');
nameSelect.append(defaultOption('name'));
names.forEach(name => {
  const nameOption = $(`<option value=${name}>${name}</option>`);
  nameSelect.append(nameOption);
});

const ages = Array(100).fill(null).map((el, idx) => idx + 1);
const ageSelect = $('<select></select>');
ageSelect.append(defaultOption('age'));
ages.forEach(age => {
  const ageOption = $(`<option value=${age}>${age}</option>`);
  ageSelect.append(ageOption);
});

const sentence = ['I am ', nameSelect, ' and I am ', ageSelect, ' years old.'];
sentence.forEach(part => $('#dropdowns').append(part));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdowns"></div>

＆＃13;

如何在文本中添加下拉列表

2 个答案:

编辑（动态创建值）：