-1

I have the below html code:

<select class="1-100"></select>

I am using Jquery to populate the value of above select option:

$(function(){
    var $select = $(".1-100");
    for (i=1;i<=100;i++){
        $select.append($('<option></option>').val(i).html(i))
    }
});

This gives me a drop down with values from 1 to 100. I want to trigger a function when I select a number from this drop down. The function should return the number I selected in the dropdown(displayed on window). How I accomplish this?

john mathew
  • 3
  • 6

4 Answers4

1

HTML :-

<select class="1-100"></select>
<textarea id="mytext"></textarea>

Jquery :-

$('select.1-100').on('change',function(){
  alert($(this).val());
  $('#mytext').val($(this).val());
});


$(function(){
    var $select = $(".1-100");
    for (i=1;i<=100;i++){
        $select.append($('<option></option>').val(i).html(i))
    }
    $('select.1-100').on('change',function(){
      alert($(this).val());
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="1-100"></select>
Kartikeya Khosla
  • 18,743
  • 8
  • 43
  • 69
  • This works! But the value which was selected does not appear in the text area after the alert box goes off. Is there are way to see which value was selected from the drop down list? – john mathew Dec 05 '14 at 05:03
  • 1
    @johnmathew...which textarea???? ... plz update your question and show where do you want to print the value.. – Kartikeya Khosla Dec 05 '14 at 05:10
  • @johnmathew Please checkout my answer below. – Rahul Desai Dec 05 '14 at 05:10
  • I don't want to display it in a separate text area. I want to the selected value to be there in "". Right now when I select say "5" , a alert box appears and when I click ok the alert box goes away but the value in the drop down is seen as "1" – john mathew Dec 05 '14 at 05:24
  • @johnmathew..no i think you are mistaken...just see the demo i have added in my post..if i select value "5" from dropdown then it remains in select as selected value.. – Kartikeya Khosla Dec 05 '14 at 05:30
  • Thanks, I was wrong , Sorry! Now what if I want the select drop down to be empty(with no value)? – john mathew Dec 05 '14 at 06:18
  • @johnmathew..if you want to empty select then try `$('select.1-100').empty()` – Kartikeya Khosla Dec 05 '14 at 06:22
1

html 

<label></label>
<select class="1-100"></select>

in js 

$(function(){
    var $select = $(".1-100");
    for (i=1;i<=100;i++){
        $select.append('<option value="'+ i +'">'+ i +'</option>');
    }
     $('select').on('change',function(){
        $('label').text($(this).val());
    });
});
Mohamed-Yousef
  • 23,946
  • 3
  • 19
  • 28
  • This works fine! The value which was selected does not appear in the text area after the alert box goes off. Is there are way to see which value was selected from the drop down list? – john mathew Dec 05 '14 at 05:07
1

You can try to attach the on change handler:

$(function() {
  var $select = $(".1-100");
  for (i = 1; i <= 100; i++) {
    $select.append($('<option>').val(i).html(i));
  }
  $select.on('change', function() {
    alert(this.value);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="1-100"></select>
0

This can be accomplished using the change event on the <select> element.

The value of the <select> can be fetched using .val().

Here's a working snippet:

$(function(){
  var $select = $(".1-100");
  for (i=1;i<=100;i++){
    $select.append($('<option></option>').val(i).html(i))
  }

  $(document).on('change', 'select', function(){
    alert($(this).val());
    $('span').text($(this).val());
    $('textarea').val($(this).val());
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Select a value: </label><select class="1-100"></select>
<p>Selected value = <span></span></p>
<textarea></textarea>
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • there is no `.text()` for textarea instead use `.val()` as shown in my answer. – Kartikeya Khosla Dec 05 '14 at 05:14
  • When I add 'select' in the .on() function it the value is seen in "select a value drop down" but if I have a alert statement inside this function, alert does not work! – john mathew Dec 05 '14 at 05:27
  • Thanks, If I don't want any value to be displayed in "Select a value" , How can I do that? – john mathew Dec 05 '14 at 06:23
  • @johnmathew If you dont want that text to be displayed, just remove the `label` tags and the text inside it. If you want no option to be shown in the dropdown when the page loads, checkout [this question](http://stackoverflow.com/questions/6223865/blank-html-select-without-blank-item-in-dropdown-list) (I personally prefer this so that the user doesnt get biased). Please mark my answer as accepted if it has solved your problem and queries. – Rahul Desai Dec 05 '14 at 06:35