如何在文本中放置下拉菜单 [英] How can I put drop downs inside a text

问题描述

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

Can anyone help me with this problem that I have.. thank you for everyone that tries to help me, so this is the text that comes from database I am #OPTION and I am #OPTION years old. and I have the drop down that I can show with the append, but they appear only after the whole sentence I need the drop down to replace #OPTION this is my code for the drop down

<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 保存我的文本 我是 #OPTION 并且我是 #OPTION 岁了. 这就是为什么下拉列表最后出现的原因，我尝试了 $(" #OPTION ").append(.. 类似这样但不起作用，任何人都可以帮助我如何用#OPTION 替换下拉列表..我需要它是这样的:

so the p holds my text I am #OPTION and I am #OPTION years old. and thats why the drop down appears in the end, I tried $(" #OPTION ").append(.. something like this but doesnt work, can anyone please help me how to replace the dropdown with the #OPTION.. I need it to be like this:

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

推荐答案

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

Here's another way. Lots of hard coding, but easy to modify to create dynamically.

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

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

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

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

这篇关于如何在文本中放置下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！