Is there a better way to insert an option in select with jquery?

Asked

Viewed 2,742 times

5

I was wondering if there’s a better way to insert a option in the select with jquery.

Example:

<select name="municipio_evento" id="municipio_evento">
<option value=""></option>
<option value="1">ACEGUA</option>
<option value="2">AGUA SANTA</option>
<option value="3">AGUDO</option>
<select>

I know I can do it that way:

$('#municipio_evento').append('<option value="4">AGUAS CLARAS</option>');

If anyone has any suggestions or ideas please.

jquery html-select insert html-option

  • This way works well. More interesting would be to know how you plan to use this code. Only there can we tell if there is a better way. But I don’t see the problem.

  • 1

    The way I want to use is dynamic, meaning that only one or several options can come. The fact is that inserting a string of this size does not seem to be the best way.

  • jQuery looks like this. Mootools in this respect is more "Javascript" using createElement and joining properties. If you will use jQuery this way works. Maybe it is good to create a function that gives return '<option value="'+valor+'">'+nome+'</option>'. If you want a concrete example you have to put more code for the example to be more accurate.

3 answers

3

The right answer is a big one depends on.

The way you exposed it is basically the pattern. Almost all examples of official documentation basically do this, use the method append to transform strings into elements and add them to a parent element of a single shot.

Another alternative is to first create the element, then insert:

var opcao = $("<option value='foo'>bar</option>");
$("#teuSeletor").append(opcao);

Which tends to be more readable and organized when there is more code involved.

The question of which shape is best depends on the context in which you will use it. If all you’re going to do is add an option once and you’re done, it’s no problem to do as you’re already doing. If you’re going to use repeating structures and/or generate options dynamically, the second way usually makes your code easier to test and maintain.

  • I wanted to reduce the number of lines and this way I think code should look better for debug among other improvements, but it gets more divided will not have a way to pass only value and text

  • 1

    The best code to debug is not the one that has fewer lines, but the one that has simpler lines to understand and ideally only one instruction per line ;)

  • I think I expressed myself badly and you didn’t understand me, what I meant is that code you described should get 'better to debug.

3


You can instantiate a DOM Option class.

 var option = new Option('TESTE','4');
 $('#municipio_evento').append(option);

You can test running on Jsfiddle, follow the link Option Append Test :

Note: I recommend using this within a Function to facilitate future reuse.

2

I believe that the best way to work with large lists in HTML + JS is to use a JSON that can even be in some external file, easier to change later, something like:

<select name="municipio_evento" id="municipio_evento"></select>
<script>

    html = "";
    obj = {
        "1" : "ACEGUA",
        "2": "AGUA SANTA",
        "3" : "AGUDO"
    }
    for(var key in obj) {
        html += "<option value=" + key  + ">" +obj[key] + "</option>"
    }
    document.getElementById("municipio_evento").innerHTML = html;

</script>

I hope I’ve helped.

Browser other questions tagged jquery html-select insert html-option

You are not signed in. Login or sign up in order to post.