0

How I can fill up my select #2 with the option value of select #1 using jquery?

For example select #1 is:

<select id="#1">
    <option value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>

My select #2 should be like this:

      <select id="#2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
zgrizzly_7
  • 693
  • 1
  • 8
  • 20

1 Answers1

3

Fiddle DEMO

If you change it to proper id as I've done below, you can get it.

$(document).ready(function(){
   $("#2").append($('#1').html()); //set options of 2nd select from options of 1st select
   $("#2 option").each(function(){
       $(this).text($(this).val());//set its text based on its value
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="1">
    <option value="1">Val 1</option>
    <option value="2">Val 2</option>
    <option value="3">Val 3</option>
</select>
<select id="2">
</select>
Guruprasad J Rao
  • 28,253
  • 13
  • 87
  • 176
  • 1
    Anytime.. Happy Coding.. Do not forget to mark it as answer.. :) – Guruprasad J Rao Oct 05 '15 at 12:18
  • 2
    The `id` attribute, starting with a number, is **only** permitted in HTML5 document. Keep in mind that you must use ` ` in very beginning of your file(s) – Bud Damyanov Oct 05 '15 at 12:19
  • GonzalezZoe.. Please make a note of @bodi0's comment... You can get to know more about it from **[here](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html)**.. Thank you bodi0 for information.. – Guruprasad J Rao Oct 05 '15 at 12:21