JavaScript not picking values up in select with options

Question

Searched on Stack overflow (jquery select change event get selected option) and trying use the code but not getting any where. When options are changed the value put together make a var which points to a location e.g. choosing Jan and the 1st makes:'0/0/1'so var data_location = ('0/0/1').

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    
});
var data_location = (this.value);

// trying to achieve var data_location = ('0/0/1');

<table>
    <tr>
        <td>
            <select name="month">
                <option value="0/0/">Jan</option>
                <option value="0/1/">Feb</option>
                <option value="0/2/">Mar</option>
            </select>
        </td>
        <td>
            <select name='day'>
                <option value="1"> 1st</option>
                <option value="2"> 2nd</option>
            </select>
        </td>
    </tr>
</table>

`var data_location = (this.value);` is running now. The code in your change-event might be running sometime in the future. Since it haven't been run, you don't get the value you expect to data_location. — some, Jan 11 '18 at 23:33

score 1 · Accepted Answer · answered Jan 11 '18 at 23:38

1

You have to make sure you have both informations...

The use of variable declared in global scope is needed.

// Define global variables.
var month;
var day;
var data_location;

// Month change
$("[name='month']").on('change', function (e) {
    month = $(this).val();
});

// Day change
$("[name='day']").on('change', function (e) {
    day = $(this).val()
});

// All change
$("select").on("change",function(){
  // Set data_location only if both infos are present.
  if(typeof(month)!="undefined" && typeof(day)!="undefined"){
    data_location = month+day;
    console.log(data_location)
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
    <tr>
        <td>
            <select name="month">
                <option value="0/0/">Jan</option>
                <option value="0/1/">Feb</option>
                <option value="0/2/">Mar</option>
            </select>
        </td>
        <td>
            <select name='day'>
                <option value="1"> 1st</option>
                <option value="2"> 2nd</option>
            </select>
        </td>
    </tr>
</table>

answered Jan 11 '18 at 23:38

Louys Patrice Bessette

33,375
6
36
64

Thank you I'm trying to add this to a script which points to a fire base location, and doesn't seem to work. – irontamoor Jan 12 '18 at 00:02
That depends on how you use `data_location`. The variable is undefined until the two selects have changed. So got to use the variable after the changes. You could give them default values too... in case of submit without change, like if Jan 1st is ok to the user. ;) – Louys Patrice Bessette Jan 12 '18 at 00:16
what command should I use to run the java script once i have the variable? – irontamoor Jan 12 '18 at 00:24
I don't really know the Firebase framework... And nothing about what you wish to do. But as soon as the JS is parsed, it runs. So you can use `data_location` on any JS function that runs after a value is defined for it, like on another event, like `submit`. – Louys Patrice Bessette Jan 12 '18 at 00:29

score 0 · Answer 2 · answered Jan 11 '18 at 23:37

There's nothing wrong w/ your jQuery code. Rather the issue lies in your understanding of async code.

$('select').on('change', function () {
    alert(this.value); 
});

Basically, because the event occurs at some unknown point in time, the event handler needs to handle what should happen after the change event triggers, which occurs in your callback function.

Read: What is the difference between synchronous and asynchronous programming?

JavaScript not picking values up in select with options

2 Answers2