How can I put drop downs inside a text

问题

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>

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.

回答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);
});

I used regular expression in replace function to replace all occurrences of #OPTION in given string.

If you want to use different dropdowns for each placeholder you need to use to different placeholders e.g #OPTION_1, #OPTION_2 and replace each one using string replace function.

回答2:

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>

EDIT (creating values dynamically):

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>

来源：https://stackoverflow.com/questions/45913784/how-can-i-put-drop-downs-inside-a-text

标签

javascript

laravel

append

dropdown