0

I need to capture the text variable selected from id

<select name="city" id="selectedCity" data-native-menu="false" onchange="location = this.options[this.selectedIndex].value;">
  <option value="#">-- Select City --</option>
  <option id="atl" value="#tiera">Atlanta</option>
  <option id="aus" value="#tierc">Austin</option>
  <option id="bal" value="#tiera">Baltimore</option>
  <option id="bos" value="#tiera">Boston</option>
</select>

problem: no matter which option is selected, I always get the last var listed, in this case I always get Boston.

    function myFunction() {
    document.getElementById("selectedCity").reset();
}

$(document).ready(function() {

  var cityInfo = $("#atl").text();
  var cityInfo = $("#aus").text();
  var cityInfo = $("#bal").text();
  var cityInfo = $("#bos").text();

  $("#selectedCity").change(function(){

      $("h1").text(cityInfo);
      });
});
pnuts
  • 58,317
  • 11
  • 87
  • 139
Oscar
  • 5
  • 2
  • 1
    Of course, because your last var declaration have that value - remove city info var lines completely... Btw, your intention is to redirect user after his choice? – sinisake Aug 20 '15 at 18:05

2 Answers2

1

You don't get the selected option.

As you may see there is a lot of way to do it.

In your case, why not try something like this

$("h1").text($(this).find('option:selected').text());

Example

Hope it may helps you

Community
  • 1
  • 1
DFayet
  • 881
  • 1
  • 11
  • 21
1

Well, for starters, you don't need to capture cityInfo four times. By doing that, the value of cityInfo will always be Boston because that's what you are setting it to, regardless of the change.

What you really want it something like:

$(document).ready(function() {
  $('#selectedCity').change(function() {
    console.log($('#selectedCity option:selected').text());
  });
});
Matthew Herbst
  • 29,477
  • 23
  • 85
  • 128