3 select changes the parameters of the url - javascript

In my web page I have 3 selects and I need to make sure that when the value inside each select changes, the parameters that make up a url in the href change.
this is the html code of the select:
<select id="comune" name="comune">
<option value="">Comune</option>
<option value="comune1">comune 1</option>
<option value="comune2">comune 2</option>
<option value="comune3">comune 3</option>
</select>
<select id="nome" name="nome">
<option value="">Nome</option>
<option value="nome1">nome 1</option>
<option value="nome2">nome 2</option>
<option value="nome3">nome 3</option>
</select>
<select id="eta" name="eta">
<option value="">Nome</option>
<option value="eta1">eta 1</option>
<option value="eta2">eta 2</option>
<option value="eta3">eta 3</option>
</select>
cerca
this is the code in js that i am integrating, but i don't know how to put the other parameters:
$("#comune").change(function () {
console.log(this.value);
$("#cerca").attr('href', '/elenco-mappa.html?comune=' + this.value);
});
thank you so much for your help!

You will need an event listener for each select. The function can be the same for all three select. You can see a working snippet below:
const comune = document.getElementById('comune');
const nome = document.getElementById('nome');
const eta = document.getElementById('eta');
const cerca = document.getElementById('cerca');
function generateLink() {
cerca.href = `elenco-mappa.html?comune=${comune.value}&nome=${nome.value}&eta=${eta.value}`;
console.log(cerca.href);
}
comune.addEventListener('change', generateLink);
nome.addEventListener('change', generateLink);
eta.addEventListener('change', generateLink);
<select id="comune" name="comune">
<option value="">Comune</option>
<option value="comune1">comune 1</option>
<option value="comune2">comune 2</option>
<option value="comune3">comune 3</option>
</select>
<select id="nome" name="nome">
<option value="">Nome</option>
<option value="nome1">nome 1</option>
<option value="nome2">nome 2</option>
<option value="nome3">nome 3</option>
</select>
<select id="eta" name="eta">
<option value="">Nome</option>
<option value="eta1">eta 1</option>
<option value="eta2">eta 2</option>
<option value="eta3">eta 3</option>
</select>
cerca
I put a console.log to show you the result, but of course you should remove it

Is this What you want?
<select id="comune" name="comune">
<option value="">Comune</option>
<option value="comune1">comune 1</option>
<option value="comune2">comune 2</option>
<option value="comune3">comune 3</option>
</select>
<select id="nome" name="nome">
<option value="">Nome</option>
<option value="nome1">nome 1</option>
<option value="nome2">nome 2</option>
<option value="nome3">nome 3</option>
</select>
<select id="eta" name="eta">
<option value="">Nome</option>
<option value="eta1">eta 1</option>
<option value="eta2">eta 2</option>
<option value="eta3">eta 3</option>
</select>
cerca
$("#comune, #nome, #eta").on("change", function () {
var comune = encodeURIComponent($("#comune").val());
var nome = encodeURIComponent($("#nome").val());
var eta = encodeURIComponent($("#eta").val());
var link = `elenco-mappa.html?comune=${comune}&nome=${nome}&eta=${eta}`;
$("#cerca").attr("href", link);
})

var prams = {
comune :'',
nome : '',
eta : ''
}
$(document).ready(function(){
$('.select').change(function(){
var name = $(this).attr('name');
var val = $(this).val();
prams[name] = val;
$('#cerca').attr('href',`elenco-mappa.html?comune=${prams.comune}&nome${prams.nome}=&eta=${prams.eta}`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select id="comune" name="comune" class="select">
<option value="">Comune</option>
<option value="comune1">comune 1</option>
<option value="comune2">comune 2</option>
<option value="comune3">comune 3</option>
</select>
<select id="nome" name="nome" class="select">
<option value="">Nome</option>
<option value="nome1">nome 1</option>
<option value="nome2">nome 2</option>
<option value="nome3">nome 3</option>
</select>
<select id="eta" name="eta" class="select">
<option value="">Nome</option>
<option value="eta1">eta 1</option>
<option value="eta2">eta 2</option>
<option value="eta3">eta 3</option>
</select>
cerca

Related

Change multiple dropdown values by selecting from a single dropdown

As the title says, Im trying to change the values on multiple dropdowns by changing a single dropdown. The multiple dropdowns need to get the same value that is selected in the "Select All" dropdown. Something very similar to a check all for checkboxes.
<select name="changeAll" id="changeAll" onchange="changeAll(this);">
<option value="select" selected="selected">Select</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency1" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency2" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<select id="currency3" class="form-control">
<option selected value="option1" disabled>Option 1</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
The idea is that when a value is selected in the first dropdown "changeAll", all of the other dropdowns will have their values change to match the one selected in the "changeAll" dropdown.
Any help with this would be greatly appreciated.
Based on what you asked, I have tried to simulate. Try to run. Thnx
$('select#changeAll').on('change', function() {
var val_ = $('#changeAll :selected').text();
$('.child-changed option').map(function() {
$(this).text(val_);
$(this).value=val_;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<select name="changeAll" id="changeAll" >
<option value="ca_select" selected="selected">Select</option>
<option value="ca_option1">ca Option 1</option>
<option value="ca_option2">ca Option 2</option>
<option value="ca_option3">ca Option 3</option>
</select>
<div>
</div>
<select id="currency1" class="form-control child-changed">
<option selected value="c1_option1_selected" disabled>currency1 Option 1</option>
<option value="c1_option1">currency1 Option 1</option>
<option value="c1_option2">currency1 Option 2</option>
<option value="c1_option3">currency1 Option 3</option>
</select>
<div>
</div>
<select id="currency2" class="form-control child-changed">
<option selected value="c2_option1_selected" disabled>currency2 Option 1</option>
<option value="c2_option1">currency2 Option 1</option>
<option value="c2_option2">currency2 Option 2</option>
<option value="c2_option3">currency2 Option 3</option>
</select>
<div>

Add third list on dependent dropdown list JS

I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>
I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/

How to get selectbox values and prices when user select a option in jQuery?

For example this hotel is 3 rooms:
<div id="hotel_room">
<select name="room_1" price="30" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_2" price="40" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_3" price="50" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
And other hotel is 4 rooms:
<div id="hotel_room">
<select name="room_1" price="30" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_2" price="40" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_3" price="50" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_3" price="50" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
how can I get the users selected , price, value when a selection happened using jquery.
this is how you can get all needed data when a selection.refer the working demo.
<html>
<head></head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
</style>
<body>
<div id="hotel_room">
<select name="room_1" price="30" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_2" price="40" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_3" price="50" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
</div>
<script type="text/javascript">
$("div#hotel_room select").click(function(){
var getTheName = $(this).attr('name');
var getThePrice = $(this).attr('price');
var getTheValue = $(this).val();
alert("NAME :----> "+getTheName +" PRICE :-----> "+getThePrice +" VALUE :-----> "+getTheValue);
});
</script>
</body>
</html>
hope this will help to you.
Look at this code, maybe it will help you.
$('#button1').on('click', function() {
$('select').each(function(index) {
console.log( $(this).attr('name') + ': price=' + $(this).attr('price') + ' selected option: ' + $(this).val() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hotel_room">
<select name="room_1" price="30" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_2" price="40" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<select name="room_3" price="50" multiple="multiple">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<button id="button1">Click</button>
</div>

How can i manage all selectbox when onchange in any one of them?

I have listing week days on my web page and every day have a select box as like below
<select name="day1" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day2" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day3" >
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
.
.
.
.
Here if i select any option from "day2" then how can i make all others select box value default or null, as well as if i select with "day1" then day2 and day3 should be default or null using jQuery
Just create a change listener on all select and change every element what is not() itself.
$("select").change(function() {
$("select").not(this).val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="day1">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day2">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select name="day3">
<option value="">select</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>

focus a select on any option selected from other select

I have 2 selects and what I need is to focus the 2nd select when selecting any option from the 1st select. My code is bellow as a sinpet code but it only set focus the 2nd select when a value is a number.
var acti = document.getElementById('activity');
var tip = document.getElementById('type');
activity.onchange = function () {
switch (this.value) {
case '1':
type.focus();
break;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="activity">
<option value="" selected="">choose one</option>
<option value="1">Act 1</option>
<option value="2">Act 2</option>
<option value="3">Act 3</option>
<option value="4">Act 4</option>
</select>
<select id="type">
<option value="">choose one</option>
</select>
I think this would work:
$('#activity').change(function(){ $('#type').focus() })
$('#activity').change(function(){
$('#type').focus()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="activity">
<option value="" selected="">choose one</option>
<option value="1">Act 1</option>
<option value="2">Act 2</option>
<option value="3">Act 3</option>
<option value="4">Act 4</option>
</select>
<select id="type">
<option value="">choose one</option>
</select>
This works:
Als note when you run this snippet only case '1': will trigger the focus with this code.
var acti = document.getElementById('activity');
var tip = document.getElementById('type');
acti.onchange = function () {
switch (this.value) {
case '1':
tip.focus();
break;
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="activity">
<option value="" selected="">choose one</option>
<option value="1">Act 1</option>
<option value="2">Act 2</option>
<option value="3">Act 3</option>
<option value="4">Act 4</option>
</select>
<select id="type">
<option value="">choose one</option>
</select>

Categories