update list of <select> from another <select multiple> using jquery - javascript

I am trying to update a <select> element when I select one or multiple values from another <select multiple> using jQuery. Here's my multiple select:
<select class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>

I hope this is what you are looking for,
$('select#first').change(function() {
$("select#second option:not(:first-child)").remove();
$(this).find("option:selected").each(function() {
$("select#second").append($(this).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select name="second" id="second">
<option value=''>Select 2</select>
</select>

Check this script https://jsfiddle.net/gpb5wx8h/5/
Jquery:
function chooseItems(item, placeholder){
$(item).change(function() {
var item = $(this);
console.log(typeof(item.val()));
if(typeof item.val() == 'object'){
$.each(item.val(), function(i,v){
var selectedItem = item.find('option[value="'+ v +'"]'),
selectedText = selectedItem.text();
selectedItem.detach();
$(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')
})
}
})
}
$(document).ready(function() {
chooseItems('.choose-role','.placeholder-role');
chooseItems('.placeholder-role','.choose-role');
})
HTML:
<select class="form-control choose-role" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>

If you want to update select options by fetching data from the server end regarding the selected values in multiple select box then you can perform ajax operation and insert the result to the another select box which is to be updated.

Related

JavaScript - using addEventListener instead of inline "onchange" with select menu

I'm trying to use "addEventListener" instead of an inline "onchange".
Something is wrong with my approach. How do I use the "addEventListener" correctly?
https://jsfiddle.net/gdfe2ynL/1/
<select id="feedbackCategory" onchange="logvalue(this.value)">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
<select id="feedbackCategory2">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
<script>
function logvalue(value) {
console.log(value)
}
document.getElementById("feedbackCategory2").addEventListener("change", logvalue(this.value));
</script>
In the programmatic listener, the event comes through as event, the element is event.target and the value of that element is event.target.value. It's easier for this kind of thing to group the elements together with a common attribute, like class and then apply the listener to each one of them via querySelectorAll and a forEach loop
function logvalue(event) {
console.log(event.target.value + ' selected from the #' + event.target.id + ' element')
}
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll(".fbselect").forEach(el => el.addEventListener("change", logvalue))
})
<select class='fbselect' id="feedbackCategory">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>
<select class='fbselect' id="feedbackCategory2">
<option value="" selected>Choose a category</option>
<option value="example1">Example 1</option>
<option value="example2">Example 2</option>
</select>

How do I know the last unselected option from a multiselect dropdown?

I have a multi select Listbox
<div id="multiselectList">
<select>
<option value="option1">Val 1</option>
<option value="option2">Val 2</option>
<option value="option3">Val 3</option>
<option value="option4">Val 2</option>
<option value="option5">Val 3</option>
</select>
Suppose all the options are selected initially. Now I unselect option2 from multi select list. How can I know which option is currently unselected by the user. I used below code but it was giving me all the unselected values.
var unselectedValue = $("#multiselectList").find('option:not(:selected)');
Can anyone help me in finding the solution?
Thanks in advance
You can use jquery last() for it
https://api.jquery.com/last/
document.querySelector('select').addEventListener('change', () => {
var unselectedValue = $("#multiselectList").find('option:not(:selected)').last();
console.log(unselectedValue.val())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
<select multiple>
<option value="option1" selected>Val 1</option>
<option value="option2" selected>Val 2</option>
<option value="option3">Val 3</option>
<option value="option4">Val 4</option>
<option value="option5" selected>Val 5</option>
</select>
Try Using
$(document).ready(function() {
$("#sel").on("click", function(event) {
if(!event.originalEvent.srcElement.selected) {
console.log($(event.originalEvent.srcElement).val());
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
<select id="sel" multiple>
<option value="option1" selected>Val 1</option>
<option value="option2" selected>Val 2</option>
<option value="option3" selected>Val 3</option>
<option value="option4" selected>Val 4</option>
<option value="option5">Val 5</option>
</select>
Try using
// save array to compare in function check
let lastSelected = [];
// set last selected value on document ready
$(document).ready(() => {
lastSelected = $('select option:not(:selected)')
.map((i, el) => el.value)
.get();
});
$('select').on('change', () => {
const currentSelected = $('select option:not(:selected)')
.map((i, el) => el.value)
.get();
// compare to get recently selected
const selected = lastSelected.filter(
(val) => !currentSelected.includes(val)
);
// compare to get recently unselected
const unselected = currentSelected.filter(
(val) => !lastSelected.includes(val)
);
recentChanges(selected, unselected);
// update last selected
lastSelected = currentSelected;
});
// recentChanges event
function recentChanges(selected, unselected) {
console.log(
(selected.length > 0 ? selected : 'nothing') + ' is selected'
);
console.log(
(unselected.length > 0 ? unselected : 'nothing') + ' is unselected'
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
<option value="option1" selected>Val 1</option>
<option value="option2" selected>Val 2</option>
<option value="option3">Val 3</option>
<option value="option4">Val 4</option>
<option value="option5" selected>Val 5</option>
</select>
How can I know which option is currently unselected by the user.
// This is the selected value on page load
let selected = $("#multiselectList option:selected").text()
// On change event
$("#multiselectList select").on("change", function(){
// Keep the previous selection
let prevSelection = selected
// Get the new one
selected = $(this).find('option:selected').text();
// Results
console.log(`${prevSelection} was deselected and ${selected} was selected.`)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="multiselectList">
<select>
<option value="option1">Val 1</option>
<option value="option2">Val 2</option>
<option value="option3" selected>Val 3</option>
<option value="option4">Val 4</option>
<option value="option5">Val 5</option>
</select>
</div>

Get the value of Select dropdown list when the value sent by the form and that appearing in the dropdown list are different

I have a form which has the following Select dropdown list.
<select name="some_options" id="some_options">
#foreach(options as option)
<option value="{{$option->id}}">{{$option->value}}</option>
#endforeach
</select>
Here , the data are being sent from the database via the Controller
The Select data look like this
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
Now, I have another disabled field which should get the value once the user changes the select option
<div>
<input type="text" id="some_options_cng" disabled>
</div>
My Javascript code
var opt = $('#some_options').val();
$('#some_options').on('change',function(){
opt = $('#some_options').val();
$('#some_options_cng').val(opt);
});
Now, the value in the <disabled> input field shows as
opt001 or opt002 and so on.
I want to show values as
Value 1 or Value 2.
How do I do it?
This code will work.
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text(); //This line of code is
//important
$('#some_options_cng').val(opt);
})
$(document).ready(function(){
$('#some_options').change(function(){
var opt = $("#some_options").find(":selected").text();
$('#some_options_cng').val(opt);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="some_options" id="some_options">
<option value="opt001">Value 1</option>
<option value="opt002">Value 2</option>
<option value="opt003">Value 3</option>
<option value="opt004">Value 4</option>
<option value="opt005">Value 5</option>
</select>
<div style="height:5px;"></div>
<div>
<input type="text" id="some_options_cng" disabled>
</div>

Remove duplicate empty values from select tag

I have below select tag
<select id="subCategorySelected">
<option value="Select Sub Category">Select Sub Category</option>
<option value=""></option>
<option value="subcat1">sub cat 1</option>
<option value="subcat2">sub cat 2</option>
<option value=""></option>
<option value="subcat4">sub cat 4</option>
<option value=""></option>
</select>
I need to filter items in the tag and remove all duplicate elements in below way
<select id="subCategorySelected">
<option value="Select Sub Category">Select Sub Category</option>
<option value=""></option>
<option value="subcat1">sub cat 1</option>
<option value="subcat2">sub cat 2</option>
<option value="subcat4">sub cat 4</option>
</select>
I have tried in below ways as suggested in some other question but both are not working
1)
var map = {};
$('#subCategorySelected').each(function () {
if (map[this.value]) {
$(this).remove()
}
map[this.value] = true;
})
2)
$("#subCategorySelected").val(function(idx, val) {
$(this).siblings('[value="'+ val +'"]').remove();
});
Thanks in advance
Check this out
$(document).ready(function(){
$('#subCategorySelected option').each(function(index,val){
var value=$(this).val();
$(this).siblings('[value="'+ value +'"]').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="subCategorySelected">
<option value="Select Sub Category">Select Sub Category</option>
<option value=""></option>
<option value="subcat1">sub cat 1</option>
<option value="subcat2">sub cat 2</option>
<option value=""></option>
<option value="subcat4">sub cat 4</option>
<option value=""></option>
</select>
If you know the only duplicates are empty values you could just do:
$("#subCategorySelected option[value='']").slice(1).remove();
otherwise your first method works, just change the selector to:
$("#subCategorySelected option")

Alert when selecting some particular value from drop down in JavaScript

Below are the dropdown data..
<select size="1" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
I want to get alert/pop up when I select the data which is start from IN in drop down list.
Try this:
https://jsfiddle.net/mminetto/bggwnkwj/
var select = $('select[name="Test_Data"]');
select.on('change', function(){
var options = select.children('option:selected');
if(options.length > 0 && options[0].innerText.startsWith("IN")){
alert(this.value);
alert(options[0].innerText);
}
});
<select size="1" name="Test_Data" id="dropdown">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
in javascript
<script>
$("#dropdown").change(function(){
if($(this).find("option:selected").text().startsWith("IN")){
alert("option with IN selected =>"+$(this).find("option:selected").text());
}
});
</script>
Try this code
HTML
<select size="1" onChange="showAlert()" id="dataCountry" name="Test_Data">
<option selected value="Select One">Select One</option>
<option value="Data1">IN-Data1</option>
<option value="Data2">IN-Data2</option>
<option value="Data3">IN-Data3</option>
<option value="Data4">AUS-Data4</option>
<option value="Data5">AUS-Data5</option>
<option value="Data6">US-Data6</option>
<option value="Data7">US-Data7</option>
</select>
JavaScript
<script>
function showAlert() {
var el = document.getElementById('dataCountry'); // get the index
var text = el.options[el.selectedIndex].innerHTML; // get the label
var n = text.search("IN"); //search number of IN
if(n>=0) {
alert(text);
}
}
</script>

Categories