CODEWITHSUNDEEP
javascriptjquery
Giuseppe Lodi Rizzini
Giuseppe Lodi Rizzini

Reputation: 1055

Create a string containg optgroup and option in jquery

I'm trying to create a string variable to append on a multiselect with jquery.

This is the fiddle example: https://jsfiddle.net/o2gxgz9r/47084/

$(document).ready(function() {
  var group = "<optgroup></optgroup>";

  $(group).attr("value", 1);
  $(group).attr("label", "test group");

  var t = "<option></option>";

  $(t).attr("value", 4);
  $(t).text("Test option");
  $(t).attr("selected", true);

  $(group).append(t);


  $("#a").html(group);
});
body {
  padding: 5px;
}

label {
  font-weight: bold;
}

input[type=text] {
  width: 20em
}

p {
  margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
RESULT TEST PURPOSE:
<br><br>
EXPECTED:
<br>
<textarea rows="5" cols="72">
<optgroup value="1" label="test group">
  <option value="4" selected>Test option</option>
</optgroup>"
</textarea>
<br><br>
GET:
<br>
<label id="a"></label>

Next step is to append the string created dinamically in a select with

$("#select").append(group);

But the string is not created...it result empty

Upvotes: 1

Views: 121

Answers (2)

dukedevil294
dukedevil294

Reputation: 1305

There are several issues:

var group = "<optgroup></optgroup>";
$(group).attr("value", 1);

You are referring to the JQuery element incorrectly. What goes inside $() needs to be a string representing an element, a class, or an id. So if you want to change all existing optgroups, it should look like this:

var group = "optgroup";
$(group).attr("value", 1);

However, based on the rest of your code that doesn't seem to be your intention. If you are wanting to create a new optgroup, then you'll need to reference an element already in the DOM to add it to (i.e. your #select).

Second, your optgroup element cannot have a value, that is invalid HTML. An optgroup is a non-selectable "label" that helps break up options in a dropdown.

Third, you are creating your <option> element incorrectly. As mentioned before, you can't create a JQuery element with a string of an open/close for an element. You'd be better off doing something like this:

var t = "<option value='4' selected='selected'>Test option</option>";
$(group).append(t);

So your code should actually look something like this:

var group = "<optgroup label='test group'>";
group += "<option value='4' selected='selected'>Test option</option>";
group += "</optgroup>";
$("#select").append(group);

If you have at least JQuery 1.8, you can change it to this:

var group = $( "<optgroup/>", { "label" : "test group"});
var option = $( "<option/>", { text : "Test option", "value" : 4, "selected" : "selected" });
group.appendTo( "#select" );
option.appendTo(group);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="select"></select>

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337743

There's a few issues here. Firstly you're attempting to append an optgroup element to a label. This is impossible as optgroup can only be children of select elements.

Secondly, optgroup elements do not have a value attribute.

Finally, you're repeatedly creating new jQuery objects for group and t, which means that all previous amendments are lost. To fix this create the jQuery objects once and store them in variables which you can then reference whenever you want to make a change. Try this:

$(document).ready(function() {
  var $group = $('<optgroup></optgroup>');
  $group.prop("label", "test group");

  var $t = $('<option></option>');
  $t.val(4);
  $t.prop("selected", true);
  $t.text("Test option");
  $group.append($t);
  
  $("#a").html($group);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="a"></select>

Note the use of val() to set the value attribute, and the use of prop() over attr() where possible.

Upvotes: 1

Related Questions