How do i show a selectbox when it is in <p> and i do p.text(“test”) in javascript?

Question

In am working with MVC and i want to show a selectbox

   <p id="selectedTrigger">
       <select name="devices" id="devices"><!-- Here i get the options with javascript --></select>
   </p>

If i do this it works, but when i do in javascript the next line of code:

    $('#selectedTrigger').text("TEST");

It doesn't show the selectbox anymore, only the text TEST

How can i solve this problem?

Answer 1

What happens is you replace everything between <p id="selectedTrigger"> and </p> . If you are using jQuery then use .html() method to replace content inside it or use .append() to add content inside your <p> .

So in your instance you would have to say:

$('#selectedTrigger').append("TEST");

Note that this will result in following code:

<p ...>
  <select ..></select>
  TEST
</p>

There is also .prepend() method that allows you to append content before any content you already have.

$('#selectedTrigger').prepend("TEST");

This would give you:

<p ...>
  TEXT
  <select ..></select>
</p>

Solution: But since you are trying to add options to your <select> inside your <p> you should really use this:

$('#devices').append("TEST");

This will give you:

<p ...>
  <select ..>
    TEST
  </select>
</p>