CODEWITHSUNDEEP
javascriptjqueryhtml
tipsywacky
tipsywacky

Reputation: 3464

html: How to add default options in multiple select tags?

I have 8 select tags in one html page. Here is one of them.

<select id="list1" name="cat1">
                            <option value="0">Select Option</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>

If I got some random default values that need to be preset to the options like <option selected="selected">. Let's say a default list = [2,5,6,4,3,6,8,9]. How would anyone approach to this problem most efficiently?

Any jquery functions set the default option values? Thanks in advance.

Upvotes: 1

Views: 3936

Answers (4)

wilsonzlin
wilsonzlin

Reputation: 2230

You can't choose more than one option in a <select> unless you give the <select> the multiple attribute:

<select id="list1" name="cat1" multiple>
    <option selected>Some selected option</option>
    <option>Not selected</option>
    <option selected>This is also selected<option>
    ...
</select>

This way, you can give multiple <option>s the selected attribute.

If you need to select multiple values provided from an array in JS, you can do:

[2, 5, 6, 4, 3, 6, 8, 9].forEach(function(valToSelect) {
  $( 'select#list1' ).find('option[value="' + valToSelect + '"]').prop('selected', true);
});

Upvotes: 1

Bilbo Baggins
Bilbo Baggins

Reputation: 1199

You should give more information on your question. Does your default list contain the elements that you want selected for each of your select elements? Are they in order? In that case I would do the following.

Assign each select element to the same class: 

<select id="list1" name="cat1" class="random-selected">
    ...
</select>

Use jQuery to assign each selected value:

var default_list = [2, 5, 11, 6]; // define what should be selected

// loop through the selects
$('.random-selected').each(function(i, obj) {
    // if our array at the index is defined
    if (default_list[i]) { 
      // if our select contains the value
      if ($(this).find('option[value=' + default_list[i] + ']').length > 0) {
          // set the selected value to be that in the default list
          $(this).val(default_list[i]);
      }
    }
});

Fiddle

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

This should work...

var list = [2, 5, 6, 4, 3, 6, 8, 9]
$('select').each(function(i, el) {
  var random = Math.floor(Math.random() * ((list.length - 1) - 0) + 0)
  $(this).val(function() { return list[random]})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150040

Assuming the eight select elements appear in the document in the same order as the default values in the array, you can do this:

var defaults = [2,5,6,4,3,6,8,9];
$("select").val(function(i) { return defaults[i]; });

When you pass a function to the .val() method, jQuery will call that function once for every matched element, setting the element's value to whatever the function returns. The first argument to the function will be the index position of the element within the set, which makes for a convenient way to get the right value from your array.

Obviously you can use a more specific selector than just "select", e.g., if the select elements in question had a common class you could select by that class.

Demo:

var defaults = [2,5,6,4,3,6,8,9];
$("select").val(function(i) { return defaults[i]; });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="list1" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list2" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list3" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list4" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list5" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list6" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list7" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="list8" name="cat1">
  <option value="0">Select Option</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

Upvotes: 1

Related Questions