We Keep Coding

hiding second select option based on first select option

I have 2 selects. Both have the same options (taken from db). Let's say the options are:
Inventory 1
Inventory 2
Inventory 3
If I choose Inventory 1 in the first select, then in the second select it should disappear. If I choose Inventory 2 in the first select, then Inventory 1 should appear back in the second select and Inventory 2 should disappear.
This is my code so far:
$('#from-location').on('change', function() {
from_location_value = $('#from-location option:selected').val();
to_location_value = $('#to-location option:selected').val();
$("#to-location option[value=" + from_location_value + "]").hide();
});

Try this
$('#from-location').on('change', function() {
let fromValue = $('#from-location').val();
let options = $('#to-location option').show();
if( $(this).val() !== '' ){
options.siblings('option[value="' + fromValue + '"]').hide()
}
});
$('#to-location').on('change', function() {
let toValue = $('#to-location').val();
let options = $('#from-location option').show();
if( $(this).val() !== '' ){
options.siblings('option[value="' + toValue + '"]').hide()
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from-location">
<option value=""></option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>
<select id="to-location">
<option value=""></option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>

I know you have already accepted an answer, but here's a different approach without duplicating code. There's only one event handler, and the behaviour you describe works for both selects - whichever option you select from whichever select will disappear from the other select.
In fact your question does not specify you want anything to happen for changes to the 2nd select, right? So this is just a demonstration of something maybe useful :-)
$('select').on('change', function() {
// Find the value we just chose
let selected = $(this).val();
// Find the select which was not just changed
let $otherSelect = $('select').not($(this));
// First unselect anything selected from the other select
$otherSelect.val('');
// Re-display everything from the other select
$('option', $otherSelect).show();
// Hide the currently selected option from the other select
$('option[value="' + selected + '"]', $otherSelect).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from-location">
<option value="">Please select</option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>
<select id="to-location">
<option value="">Please select</option>
<option value="Inventory 1">Inventory 1</option>
<option value="Inventory 2">Inventory 2</option>
<option value="Inventory 3">Inventory 3</option>
</select>

How can maintain as selected the second option in a drop down with random values?

I want to always maintain how to select the second option for its drop downs. The point here is that the value is random:
MyBrowser.document.getElementById("multipleCat_1").Value = "RANDOMVALUE"
How do I select the second option in a drop down menu?
HTML:
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>

You can use selectedIndex as below:
document.querySelectorAll('#multipleCat_1 > option')[1].value = 'Got you!';
document.getElementById('multipleCat_1').selectedIndex = 1
console.log(document.getElementById('multipleCat_1').value)
<select id="multipleCat_1">
<option value="-1">Select</option>
<option value="RANDOMVALUE">Second Option"</option>
</select>

<select id="multipleCat_1">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C">CCC</option>
</select>
var options = document.querySelectorAll('#multipleCat_1 > option');
document.getElementById('multipleCat_1').value = options[1].value;

remove selected value from select box using jquery but It's need to display current selected value in select box?

I have a select box and add more button. when I click add more button it's creating another select using clone.In first select box I select one option value from select box means that value should be removed from next created select box.At the same time which selected value in select box that current value shown on current select box. Select box value is being loaded dynamically.
Eg:
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>

Is it what you're looking for ?
I would recommend you to play and manipulate with index(), that won't bother your dynamic values.
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
$('button').click(function(){
//Take a clone of last
var cloneElement = $('.sectionType:last').clone();
//Get index of option selected from last
var indexToRemove = $('.sectionType:last').find('option:selected').index();
//Remove previously selected index
cloneElement.find('option').eq(indexToRemove).remove();
//Change the id of an element
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1));
//If element has options
if(cloneElement.find('option').length)
{
//Finally append it
$('body').append("<br/><br/>").append(cloneElement);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value="">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Clone</button>

You can try like this.
$("#yourId").val(" ")//if your value has white spec else use like below line
$("#YourId").val("")//What ever you want to be selected, place your value in .val()

I hope this will help you, if you need anything please ask!
$("button").on("click", function() {
$("#section_1")
.clone()
.attr("id", "section_2")
.on("change", function() {
var sec2Val = $(this).val();
var delOption = $("#section_1 > option[value=" + sec2Val + "]").detach();
optionHolder.push(delOption);
})
.insertAfter($("#section_1"));
$(this).attr("disabled", "disabled");
});
var optionHolder = [];
$("#section_1").on("change", function() {
var sec1Val = $(this).val();
if ($("#section_2")) {
var delOption = $("#section_2 > option[value=" + sec1Val + "]").detach();
optionHolder.push(delOption);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="section" id="section_1" class="sectionType">
<option value=" ">------</option>
<option value="05">test1</option>
<option value="06">test2</option>
<option value="07">test3</option>
<option value="08">test4</option>
<option value="10">test5</option>
<option value="11">test6</option>
<option value="12">test7</option>
<option value="13">test8</option>
<option value="14">test9</option>
</select>
<button>Add more</button>

How to get the last value selected from dropdown and disable it using jquery

I have two drop-down's, i want to disable the last value selected from the drop down and enable the previous value in other drop-down.
Let's say i have two drop-down's as below :
<select name="g1" id="box_g1">
<option value="Select">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
<select name="g2" id="box_g2">
<option value="Select">Select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
If i select option : 'one' from box_g1 and then 'two' from box_g1 again (i.e. from the same box). then only the last value 'two' should be disabled in the next drop-down. Check the below fiddle :
JS Fiddle
Any help is appreciated.

Can try something like below
<script type="text/javascript">
var g1 = [],
g2 = [];
$('#box_g1 option').each(function(){g1.push($(this).val());});
$('#box_g2 option').each(function(){g2.push($(this).val());});
$('#box_g1').on('change', function(){
var options = '',
selected = $('#box_g1').val();
for(var i = 0; i < g2.length; i++){
if(selected != g1[i] && selected != 'Select'){
options += ('<option value="'+g2[i]+'">'+g2[i]+'</option>');
}
}
$('#box_g2').empty().html(options);
});
</script>

You could store the value of the last item selected from the first box, and then iterate through the 2nd box and compare the values to the stored value, disabling all those that match.

Within a multi select, I need to be able to get the value of the currently selected option

Edit:I think I have confused you guys with what I need. If I select val1 I need the function to return val1. If I then select val2, with val1 still selected as part of the multi select, I need to return val2. Then I can use the values to set the id and name of rewly created inputs.
I have a select list that has multiple="multiple"
I want to create a text input associated with each selected option and set the id and name of the new input based on the value of each newly selected option, but I always get the value of the first item from the onchange event. Not the first value, but the first selected value. So if I choose val2 first, that is returned, but if I choose val1 first then val2 the id and name will be the same as when val1 is selected.
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
I have used the following function and it returns the first value.
$("#multiSelect").on('change', function(evt, params) {
alert($("option:selected", this).val());
});
This will return the first selected option. If I then choose the second option, I still get the first value. I need to get the value of whichever option has been selected.
Thanks in advance.

The workaround is to save previously selected elements and compare them with newly selected ones:
let selectedOptions = [];
$("#multiSelect").on("change", function() {
const newSelectedOptions = $(this).val() || [];
const addedOptions = newSelectedOptions.filter(option => !selectedOptions.includes(option));
const removedOptions = selectedOptions.filter(option => !newSelectedOptions.includes(option));
selectedOptions = newSelectedOptions;
console.log("addedOptions", addedOptions);
console.log("removedOptions", removedOptions);
});
<select id="multiSelect" multiple="multiple">
<option value="value_1">Value 1</option>
<option value="value_2">Value 2</option>
<option value="value_3">Value 3</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

You get the selected values on change:
$("#multiSelect").on('change', function () {
var selected = $.map($('option:selected', this),
function (e) {
return $(e).val();
});
alert(selected);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>

Try this one : http://jsfiddle.net/csdtesting/jb7ckarp/
$("#multiSelect").on('change', function(evt, params) {
$("#myDiv").append("<span id='mySpan'><input type='text' name='" + $(this).val() + "' value='My name is: " + $(this).val() + "'/>")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<div id="myDiv">
</div>

Maybe this is what you want, or not :D http://jsfiddle.net/mnm2oaeo/
<select id="multiSelect" multiple="multiple">
<option value="val1">Value 1</option>
<option value="val2">Value 2</option>
<option value="val3">Value 3</option>
</select>
<script type="text/javascript">
var items = [];
$("#multiSelect").on('change', function(evt, params) {
var selected = $(this).val() || [];
if (selected.length == 0)
items.length = 0;
else {
$.each(selected, function(i) {
if (items.indexOf(selected[i]) == -1) {
items.push(selected[i]);
alert(selected[i]);
}
});
}
});
</script>