Onchange with double value

1

Is it possible to get the values of each option in a combobox? 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 it has 0 to fetch the select value from the bottom and the second select where it has 0 to fetch the value from the select from above. >     

asked by anonymous 20.04.2015 / 00:47

1 answer

1

If you understand your doubts, you want to change 0 to Publicidades(this.value, 0) and Publicidades(0,this.value) to 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 (for all elements the class, eg <select class=" test foo ola"> and document.getElementsByClassName("foo") )

  • document.querySelector uses advanced selectors to get an element

  • document.querySelectorAll uses advanced selectors to grab multiple elements

  

One tip, I do not see the need for id inside an option, I think you wanted to add to select actually. I also did not understand why you repeated the name="customers" attribute, but maybe your actions are not about a form

Instead of using the onchange property 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 are 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're using jQuery, you can do this:

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><divid="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.

    
20.04.2015 / 05:21