Onchange with double value

Question

It is possible to take a combobox the values of each option? Something like this:

<form action=""> 
<select name="customers" onchange="Publicidades(this.value, 0)">
    <option value="" id="teste">Escolha o utilizador</option>
<?php echo $options; ?>
</select>
<select name="customers" onchange="Publicidades(0,this.value)">
    <option value="" id="teste">Escolha a localidade</option>
<?php echo $options_1; ?>
</select>
</form>

In the first select where 0 was the value of select from the bottom and in the second select where you have 0 you would fetch the value from the top select.

Answer 1

If I understand your doubt, you want to change the 0 in Publicidades(this.value, 0) and Publicidades(0,this.value) at the current value of the other select.

For this you can use properties like:

• document.getElementById (by only one element with ID, eg: <select id="foo"> and document.getElementById("foo"))

• document.getElementsByClassName (by all elements the class, ex: <select class=" test foo ola"> and document.getElementsByClassName("foo"))

• document.querySelector uses advanced selectors to catch an element

• document.querySelectorAlluses advanced selectors to catch various elements

A tip, I don’t see the need to id in an option, I think you wanted to add to select actually. I also didn’t understand why you repeated the attribute name="customers", but maybe your actions have nothing to do with a form

Instead of using the property onchange directly in html, you can set using Javascript, for example:

<select id="foo-1">
   <option value="">Selecione...</option>
   <option value="olá mundo!">olá mundo!</option>
   <option value="Hello world!">Hello world!</option>
</select>

<script>
document.getElementById("foo-1").onchange = function() {
    alert(this.value);
};
</script>

In your case, you’re using two selects, so do something like:

<form action=""> 
    <select name="customers" id="customers-A">
        <option value="">Escolha o utilizador</option>
        <option value="a 1">a 1</option>
        <option value="a 2">a 2</option>
        <option value="a 3">a 3</option>
    </select>

    <select name="customers" id="customers-B">
        <option value="">Escolha a localidade</option>
        <option value="b 1">b 1</option>
        <option value="b 2">b 2</option>
        <option value="b 3">b 3</option>
    </select>
</form>

<script type="text/javascript">
    var a1, a2;

    function Publicidades(a, b) {
        alert([a, b]);
    }

    a1 = document.getElementById("customers-A");
    a2 = document.getElementById("customers-B");

    a1.onchange = function() {
        Publicidades(a1.value, a2.value);
    };

    a2.onchange = function() {
        Publicidades(a2.value, a1.value);
    };
</script>

If you are using jQuery, you can do so:

function foo(a, b) {
    $("#result").html([a, b].join(","));
}

$(document).on("change", "#customers-A", function() {
    foo(this.value, $("#customers-B").val());
});

$(document).on("change", "#customers-B", function() {
    foo(this.value, $("#customers-A").val());
});

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

<div id="result"></div>

<form action=""> 
    <select name="customers" id="customers-A">
        <option value="">Escolha o utilizador</option>
        <option value="a 1">a 1</option>
        <option value="a 2">a 2</option>
        <option value="a 3">a 3</option>
    </select>

    <select name="customers" id="customers-B">
        <option value="">Escolha a localidade</option>
        <option value="b 1">b 1</option>
        <option value="b 2">b 2</option>
        <option value="b 3">b 3</option>
    </select>
</form>

To conclude, you can use any of the above methods ( (document.getElementsByClassName, etc) or jQuery, there is more than one way to do things.