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.