且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何在文本中放置下拉菜单

更新时间:2022-11-10 23:29:05

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

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>