We Keep Coding

Change option values of select 2 if select 1 has a value with jquery

I require a bit of jQuery to do the following:
A user can currently select Program and/or a region.
If a user selects Program AND a Region I require the option values of the region dropdown to change to "?region=1" and "?region=2"
<select class="program" id="program">
<option value="program1.html">Program 1</option>
<option value="program2.html">Program 2</option>
</select>
<select class="region" id="region">
<option value="region1.html">Region 1</option>
<option value="region2.html">Region2</option>
</select>
Greatly appreciate the assist.
My attempt at JQuery:
$('#program').on('change', function () { if($(this).val() !="0") { } else { // no option is selected } })

You need to further extend the change event for #program and include a similar one for #region.
var programSelected = null;
var regionSelected = null;
$('#program').on('change', function(element) {
programSelected = $('#program option:selected').text();
updateRegionOptions();
});
$('#region').on('change', function(element) {
regionSelected = $('#region option:selected').text();
updateRegionOptions();
});
function updateRegionOptions() {
if(programSelected != null && regionSelected != null) {
$('#region option').each(function() {
var modifiedString = '?';
modifiedString += $(this).val().replace(/\d+/,'');
modifiedString = modifiedString.replace('.html','');
modifiedString += '=';
modifiedString += $(this).val().match(/\d+/);
$(this).val(modifiedString);
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="program" id="program">
<option value="" selected disabled>Select Program</option>
<option value="program1.html">Program 1</option>
<option value="program2.html">Program 2</option>
</select>
<select class="region" id="region">
<option value="" selected disabled>Select Region</option>
<option value="region1.html">Region 1</option>
<option value="region2.html">Region2</option>
</select>
Explanation of the logic above:
on('change' event for both #region and #program
Set the relevant variable programSelected or regionSelected depending on the change event
Run function updateRegionOptions();
If the variables programSelected and regionSelected both have a value
For each of the options in #region
Mutate the existing value to be of the form "?region=1" and "?region=2"
Update the value section of each of the option elements to have this value
The relevant JSFiddle for review.
If this solved your issue, please accept this answer :)

Update URL with two dropdown list in jquery

I do have two select box like this.
<select class="" id="sender" name="sender">
<option value="">---Select sender ---</option>
<option value="1">Corliss Barrie</option>
<option value="2">Marcie Nava</option>
<option value="3">Weston Bryand</option>
<option value="4">Osvaldo Lasker</option>
<option value="5">Regan Ruckman</option>
</select>
<select class="" id="reciever" name="reciever">
<option value="">---Select sender ---</option>
<option value="1">Araceli Scheff</option>
<option value="2">Assunta Marsch</option>
<option value="3">Yang Wengerd</option>
<option value="4">Branden Purtee</option>
<option value="5">Krystal Fresquez</option>
</select>
My question is I need to update the url with this two select box values, only if both dropdown selected.
I can do it for one dropdown like below, but not sure how to do it with two drop down.
$('#sender').change(function(){
var url = "?sender="+$(this).val();
window.location = url;
});
But my expected url is something similar to this:
?sender=value&reciever=value
Hope somebody may help me out.
Thank you.

you can pretty easy outsource the logic into one function that only changes url if both values are given
$('#sender, #receiver').change(changeUrl);
function changeUrl(){
if($('#receiver').val() != "" && $('#sender').val() != "" ){
url = "?sender="+$('#sender').val()+"&receiver="+$('#receiver').val();
window.location = url;
}
}

Just add another event listener and a conditional:
function changeURL(){
if($('#sender').val()!="" &&$('#receiver').val()!=""){
var url = "?sender="+$(this).val()+'&receiver="+$('#receiver').val();
window.location = url;
}
}
$('#sender').change(changeURL);
$('#receiver').change(changeURL);

Here is a working fiddle. Added a common class url to both select element. And then do functionality on change event.
$('.url').change(function(){
var sender = $('#sender').val();
var receiver = $('#reciever').val();
if(sender !== '' && receiver !== '') {
var url = "?sender=" + sender + "&reciever=" + receiver;
window.location = url;
}
});

Use it like this:
<select class="changeurl" id="sender" name="sender">
<option value="0">---Select sender ---</option>
<option value="1">Corliss Barrie</option>
<option value="2">Marcie Nava</option>
<option value="3">Weston Bryand</option>
<option value="4">Osvaldo Lasker</option>
<option value="5">Regan Ruckman</option>
</select>
<select class="changeurl" id="reciever" name="reciever">
<option value="0">---Select reciever ---</option>
<option value="1">Araceli Scheff</option>
<option value="2">Assunta Marsch</option>
<option value="3">Yang Wengerd</option>
<option value="4">Branden Purtee</option>
<option value="5">Krystal Fresquez</option>
</select>
And your jquery code will like this:
$('.changeurl').on('change', function (e) {
if( $('#sender').val()!="0" && $('#reciever').val()!="0" ){
var newURLString = window.location.href + "?sender=" + $('#sender').val() + "&reciever=" + $('#reciever').val();
window.location.href = newURLString;
}
});

Hide option from dropdown 2 when selected in dropdown 1

I have two dropdowns, both have the same items in them. If an option is selected in dropdown 1 then I would like to hide that option in dropdown 2. When it is unselected in dropdown 1 I would like it to appear again in dropdown 2 and whichever option is then selected to then be hidden in dropdown 2. I am trying to have this exclude the blank option in the first index.
Here is a codepen that I started, but I am not sure where to go from here:
http://codepen.io/cavanflynn/pen/EjreJK
var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
$dropdown1.change(function () {
var selectedItem = $($dropdown1).find("option:selected").val;
});
Thanks for your help!

As said in comments, one of the options is to disable/enable options according to the selection in the first select, like below. This would work on all browsers as opposed to hide/show which doesn't.
var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
$dropdown1.change(function() {
$dropdown2.find('option').prop("disabled", false);
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop("disabled", true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="dropdown2">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
Another option is to remove/add options in the 2nd dropdown based on the selection in the first via .clone(), as below.
var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').remove();
}
});
A Demo

var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
$dropdown1.change(function() {
var selectedItem = $(this).val();
var $options = $("select[name='dropdown1'] > option").clone();
$("select[name='dropdown2']").html($options);
$("select[name='dropdown2'] > option[value="+selectedItem+"]").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="dropdown1">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="dropdown2">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
Demo

You should use this plugin http://gregfranko.com/jquery.selectBoxIt.js
It has some really nice callbacks and customisation options.
When one changes you can put it in the callback to update the other.

Here is one way of doing it. You do need to include jQuery, and then as long as the value isn't empty hide the option with the similar value.
var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
$dropdown1.change(function() {
$dropdown2.children().show();
var selectedItem = $($dropdown1).val();
if (selectedItem != "")
$('select[name="dropdown2"] option[value="' + selectedItem + '"]').hide();
});
$dropdown2.change(function() {
$dropdown1.children().show();
var selectedItem = $($dropdown2).val();
if (selectedItem != "")
$('select[name="dropdown1"] option[value="' + selectedItem + '"]').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="dropdown1">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="dropdown2">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>

Here's an approach that stores a set of the options on page load then filters the alternate select when a change is made. It works in both directions for changes made to either select
var $drops = $('.drop'),
// store a set of options
$options = $drops.eq(1).children().clone();
$drops.change(function(){
var $other = $drops.not(this),
otherVal = $other.val(),
newVal = $(this).val(),
$opts = $options.clone().filter(function(){
return this.value !== newVal;
})
$other.html($opts).val(otherVal);
});
Values will also be maintained and this is 2 directional so a change in either will filter the other
DEMO

Well, this code will find option by value in necessary selects and remove it.
http://codepen.io/anon/pen/LVqgbO
var $dropdown1 = $("select[name='dropdown1']");
var $dropdown2 = $("select[name='dropdown2']");
var populateDropdown = function(element) {
element.find("option").remove();
element.append("<option></option>");
// There should be real data
for (var i = 1; i <= 3; i++) {
element.append("<option value='" + i + "'>Test " + i + "</option>");
}
}
var getOptionProps = function(element) {
var selectedValue = element.val();
var selectedText = element.find("option[value=" + selectedValue + "]").text();
return { text: selectedText, value: selectedValue };
}
var removeOptionWithValue = function(element, value) {
element.find("option[value='" + value + "']").remove();
}
$dropdown1.on("change", function () {
var selectedProps = getOptionProps($(this));
populateDropdown($dropdown2);
removeOptionWithValue($dropdown2, selectedProps.value);
});
$dropdown2.on("change", function () {
var selectedProps = getOptionProps($(this));
populateDropdown($dropdown1);
removeOptionWithValue($dropdown1, selectedProps.value);
});

How to add a "random" button that applies to two drop down menus

I have created a page with two drop-down menus containing various values.
Now I would like to add a "randomize" button. When clicked, this button would select any of the values at random in both fields. (the values are also copied on a box above each menu).
Project idea for drop down menus
So far I've coded the menus and the words display in the boxes above them when the user selects them. But now I'm trying to add a randomise button that would put any of the values in the drop down as selected and of course displayed in the above text box. Ideally, more values in the drop-down menus would be added every once in a while without making the script dysfunctional... and ideally it would all be contained in a HTML file (calling for JQuery or javascript is ok).
I've looked at this but it doesn't apply.
I also looked at this but it's not really a feature that the user activates.
Very grateful if anyone can help! Thanks

hope this helps
HTML :
<select id="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="s2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Javascript:
var minNumber = 0;
var maxNumber = 3;
function randomNumberFromRange(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
I create this fiddle for you...
https://jsfiddle.net/s59g8vdp/

The first example you have provided is very close to what you want to do. You just need to:
Get a random value between 0 and options.length - 1.
Get option[random] and set its selected property to true.
Copy that option's .innerHTML or .value to the .innerHTML or .value of the label on top of the dropdowns.
This is all you probably need:
function randomizeSelect(selectId, fieldId) {
var options = document.getElementById(selectId).children;
var random = Math.floor(options.length * (Math.random() % 1));
var option = options[random];
option.selected = true;
document.getElementById(fieldId).value = option.innerHTML; // You can use .value instead in both places
}
var values = {};
window.onload = function(e) {
document.onchange = function(e) { // Event Delegation: http://davidwalsh.name/event-delegate
var t = e.target;
if(t.tagName == "SELECT")
document.getElementById(t.id.replace("Select","Label")).value = t.children[t.selectedIndex].innerHTML;
}
document.oninput = function(e) {
var t = e.target;
if(t.tagName == "INPUT") {
if(values.hasOwnProperty(t.id))
var options = values[t.id];
else
var options = document.getElementById(t.id.replace("Label","Select")).children;
var currentValue = t.value;
for(i in options) {
if(options[i].innerHTML == currentValue) { // Can also use .value
options[i].selected = true;
break;
}
}
}
}
document.getElementById("randomize").onclick = function(e) {
randomizeSelect("leftSelect", "leftLabel");
randomizeSelect("rightSelect", "rightLabel");
}
}
<input type="text" id="leftLabel" value="Left 1">
<select id="leftSelect">
<option value="l1" selected>Left 1</option>
<option value="l2">Left 2</option>
<option value="l3">Left 3</option>
</select>
<input type="text" id="rightLabel" value="Right 1">
<select id="rightSelect">
<option value="r1" selected>Right 1</option>
<option value="r2">Right 2</option>
<option value="r3">Right 3</option>
</select>
<button id="randomize">RANDOMIZE</button>

This will create random number and click on random div menu:
$(function(){
$(".menu").click(function(){
alert("you clicked "+$(this).text());
});
});
function doSomthing(){
var rand=Math.floor((Math.random() * 5));
alert(rand+1);
var ele = $(".menu").get(rand);
$(ele).click();
}
fiddle example: link
Or you can use this example to put value in the menu, or wherever you want: link 2

just a concept how to make that
$('input').on('click',function(){
var randomnum = Math.floor(Math.random()*$('ul li').length);
alert($('ul li').eq(randomnum).text());
});
DEMO FIDDLE

Randomize Button added
see... ;) i hope this solve your problem!
https://jsfiddle.net/s59g8vdp/1/
Html :
<select id="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select id="s2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<a id="randomize" href="#">randomize</a>
Javascript :
var minNumber = 0;
var maxNumber = 3;
$("#randomize").click(function(){
$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
});
function randomNumberFromRange(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);

coding onchange event

hello
i need to load page based on the results of dropdown box. for example in my code i have value="userlog". if this selected it will load userlog.php and remove itself so that only userlog.php is being used. thanks
<select onchange="updatePage(this.value)">
<option value="">Select a report</option>
<option value="userlog">User Logs</option>
<option value="actionlog">Action Logs</option>
</select>

<select id="select_page">
<option value="">Select a report</option>
<option value="userlog">User Logs</option>
<option value="actionlog">Action Logs</option>
</select>
$('#select_page').change(function() {
var $el = $(this);
if($el.val() != '') {
$('#page').load($el.val()+'.php');
$el.find('option:selected').remove();
}
});

On change event you will get the selected options value. Using this value you can decide what you want to do.

something like this :
$(document).ready(function() {
$("select option ").each(function() {
if (location.href.indexOf($(this).val()) >= 0) {
$(this).remove();
}
});
$('select').change(function() {
var obj = $(this);
location.href = obj.val() + ".php";
});
});