如何在文本中放入下拉菜单 [英] 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
保存我的文本I am #OPTION and I am #OPTION years old.
,这就是为什么下拉菜单最终出现的原因,我尝试了$(" #OPTION ").append(
..像这样的方法,但是不起作用,有人可以帮我如何用下拉菜单替换下拉菜单吗?选项..
我需要像这样:
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屋!