Javascript Div onchange Grab Values from Two Select Boxes

Question

I'm trying to make it so when a select box within a div changes, it will grab values from both that select box and one other one that I've yet to add, but I don't know how to go about it.
I currently have this code

<select id='selMag' onchange='getSelMag(this)'> 
    <option value='0.0>Select Minimum Magnitude</option> 
    <option value='1.0'>1.0</option> 
    <option value='2.0'>2.0</option> 
    <option value='3.0'>3.0</option> 
    <option value='4.0'>4.0</option> 
    <option value='5.0'>5.0</option> 
    <option value='6.0'>6.0</option> 
    <option value='7.0'>7.0</option> 
    <option value='8.0'>8.0</option> 
    <option value='9.0'>9.0</option> 
    <option value='10.0'>10.0</option> 
</select>

function getSelMag(sel) {
    value = Number(sel.value);
    console.log(window.value);
}

This, as it is right now, works fine from grabbing it from the , but I would like to add another one and put them inside a container div, and make it so when either one changes it will grab the values from both of them, add both strings together, and convert them into a number. I plan to make it so the select box above will not have the decimal values and just be 1, 2, etc. and have the second box be .1, .2, etc. so when they are added together, it will show 1.1, 1.2, etc.

score 0 · Answer 1 · edited May 23 '17 at 12:30

Use the answer from this link to get the value of other select box in getSelMag() function

Get selected value in dropdown list using JavaScript?

as follows:

function getSelMag(sel) {
    value = Number(sel.value);
    console.log(window.value);
    var e = document.getElementById("selMag2");
    var option2 = e.options[e.selectedIndex].text;
    //do whatever u want
}

You can make another function say x() that will be called for other select box you make and access the value of first select box from that

<select id='selMag2' onchange='x(this)'>

as

function getSelMag2(sel) {
    value = Number(sel.value);
    console.log(window.value);
    var e = document.getElementById("selMag");
    var option1 = e.options[e.selectedIndex].text;
    //do whatever u want
}

Hope this helps

RobG · Accepted Answer · 2015-07-01T00:41:12.750

Presumably, the select is in a form. To be successful, form controls must have a name, so:

<select id='selMag' name='selMag' onchange='getSelMag(this)'>

Adding a name nearly always obviates the requirement for an ID. If the other select also has a name:

<select name='selMag2'>

and it belongs to the same form as the first, you can reference it from the getSelMag function via the form:

function getSelMag(sel) {

    // Always declare variables
    var value = Number(sel.value);

    // Access them from the appropriate scope
    console.log(value);

    // Reference the other select using named properties of the form
    var otherSelect = sel.form.selMag2;

    // Do stuff with it
    var otherValue = otherSelect.value;
}

Note that all form controls have a form property that references their parent form, and that the controls belonging to a form can be accessed via the form's elements collection.

Those with names (and in some browsers those with IDs) can be accessed as named properties of the form and of the elements collection, and also by index in the collection.

It seems that you want to concatenate the values with a period between, so the function might look like:

function getSelMag(sel) {
    var value0 = sel.form.selMag.value;
    var value1 = sel.form.selMag2.value;
    console.log(value0 + '.' + value1);
}

and the HTML:

<form>
  <select name="selMag" onchange="getSelMag(this);">
    <option value="0" selected>0
    <option value="1">1
    <option value="2">2
  </select>
  <select name="selMag2" onchange="getSelMag(this);">
    <option value="0" selected>0
    <option value="1">1
    <option value="2">2
  </select>
</form>

Worked perfectly, thank you. Also, the reason I didn't declare the variable was because it is declared elsewhere in my code globally, this was just a snippet. — unironicallyironic, Jul 01 '15 at 01:00

Javascript Div onchange Grab Values from Two Select Boxes

2 Answers2