I want to change the value of the label when I select two values(one from each multiple select box) Like option1 from box1 and option2 from box2 and the label value changes.
<select id="opt1" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="opt2" multiple="multiple">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select><br />
<label id="changeme">This should change</label>
var FLAG1=0;
function update(){
if(FLAG1==0){
FLAG1=1;
}
else{
var ct=document.querySelectorAll('select');
document.getElementById('changeme').innerHTML=ct[0].value+"-"+ct[1].value;
FLAG1=0;
}
}
<select id="opt1" multiple="multiple" onchange="update();">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="opt2" multiple="multiple" onchange="update();">
<option value="1">Opt 1</option>
<option value="2">Opt 2</option>
<option value="3">Opt 3</option>
<option value="4">Opt 4</option>
</select><br />
<label id="changeme">This should change</label>
Roughly it may be like that
var s1_t = 'N/A';
var s2_t = 'N/A';
$('#opt1').change(function(){
var $this = $(this);
var val = $this.val();
s1_t = val ? $this.find("option[value=" + val + "]").text() : 'N/A';
$('#changeme').text(s1_t + ' - ' + s2_t)
});
$('#opt2').change(function(){
var $this = $(this);
var val = $this.val();
s2_t = val ? $this.find("option[value=" + val + "]").text() : 'N/A';
$('#changeme').text(s1_t + ' - ' + s2_t)
});
Your updated sample JsFiddle
You could start with something like this
var label = document.getElementById("changeme");
var opt1 = document.getElementById("opt1");
var opt2 = document.getElementById("opt2");
opt1.onchange = function() {
label.textContent = opt1.value + "-" + opt2.value;
}
opt2.onchange = function() {
label.textContent = opt1.value + "-" + opt2.value;
}
https://jsfiddle.net/61ed0t6j/6/
Related
I'm trying to clone a select options into another select. At the moment I'm able to do it but now the original option contains a custom attribute. So my question is how can I access to the custom attribute? This is what I have for now:
var options = $('#sel1 option');
var arrayOptions = [];
for (var i = 0; i < options.length; i++) {
var id = parseInt($(options[i]).val(), 10);
var text = $(options[i]).text() || '[select a type]';
arrayOptions.push('<option value="' + id + ' data-custom="' + options[i]["data-custom"] + '">' + text + '</option>');
}
console.log(arrayOptions);
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>
Right now options[i]["data-custom"] is setting undefined instead of abc1, abc2, etc.
Here is a fiddle.
You can use dataset.custom
var options = $('#sel1 option');
var arrayOptions = [];
for (var i = 0; i < options.length; i++) {
var id = parseInt($(options[i]).val(), 10);
var text = $(options[i]).text() || '[select a type]';
arrayOptions.push('<option value="' + id + ' data-custom="' + options[i].dataset.custom + '">' + text + '</option>');
}
$('#result').text(arrayOptions.join("\n"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>
<pre id="result"></pre>
this way
const arrayOptions =
[...document.querySelectorAll('#sel1 option')]
.map( opt => `<option value="${opt.id}" `
+ `data-custom"${opt.dataset.custom}">`
+ `${opt.textContent}"</option>`
)
console.log(arrayOptions);
<select id="sel1">
<option value="1" data-custom="abc1">Hello 1</option>
<option value="2" data-custom="abc2">Hello 2</option>
<option value="3" data-custom="abc3">Hello 3</option>
</select>
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>
I have some picture in folder "../../images"
I give the name of picture with example
101_2018_1_1.jpg
101_2018_1_2.jpg
101_2018_1_3.jpg
101 is on var1
2018 is on id year
and 1 is on var3
and the last is auto increment
how can I call all the images with specific named based on combo box I chose with javascript and show the image on my page?
here the example of my form
<form>
<select name="var1" id="var1" >
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3" >
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<button type="submit" name="search">search</button>
</form>
Using jQuery you can do something like:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault();
var URL = "www.example.com/image/";
//Get the values of form element
var var1 = $("#var1").val();
var year = $("#year").val();
var var3 = $("#var3").val();
//Check Up to 10 increments
for (i = 1; i <= 10; i++) {
var img = URL + var1 + "_" + year + "_" + var3 + "_" + i + ".jpg";
getImage(img);
}
return false;
});
});
/*
Check if image exist and add it.
If not, just console
*/
function getImage(image_url) {
$.get(image_url)
.done(function() {
// Image does exist - append on #image-container container
$("#image-container").append('<img src="' + image_url + '">');
}).fail(function() {
// Image doesn't exist - do nothing.
console.log(image_url + " does not exist.");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="2018">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<div id="image-container"> </div>
<button type="submit" name="search">search</button>
</form>
If I understand correctly, you would do something like:
var imgUrl, counter = 3;
document.getElementById('search').addEventListener('click', function() {
imgUrl = "../../" + document.getElementById('var1').value + "_" + document.getElementById('year').value + "_" + document.getElementById('var3').value + "_";
alert(imgUrl);
for (var i = 0; i < counter; i++) {
var img = document.createElement("IMG");
var url = imgUrl + i.toString() + ".jpg"
//img.setAttribute('src', );
alert(url);
}
});
<form>
<select name="var1" id="var1">
<option value='101'>id 1</option>
<option value='102'>id 2</option>
<option value='103'>id 3</option>
</select>
<input type="text" id="year" name="year" value="<?php echo date('Y'); ?>">
<select name="var3" id="var3">
<option value='1'>case 1</option>
<option value='2'>case 2</option>
<option value='3'>case 3</option>
<option value='4'>case 4</option>
</select>
<input type="submit" name="search" id='search'>
</form>
That would get you the image url, set the src attribute to that url, then append it to the body.
i am having two multi select dropdowns. those two dropdowns will have the same set of options (like monday, tuesday ,wednesday). now i want to have a validation where in one dropdown of these selected to some options(these are multi select dropdowns.), then the same options should not be available to select from the other dropdown.(means those should be disable.) here for multi select i am using one UI js plugin multi select dropdown javascript plugin.
<label for="shift_day_list_1">Day</label>
<input name="shift[day_list_1][]" type="hidden" value="" /><select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
<label for="shift_day_list_2">Day</label>
<input name="shift[day_list_2][]" type="hidden" value="" /><select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]"><option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option></select>
this is my js code:
$(document).ready(function() {
$('#day_list_1').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
$('#day_list_2').SumoSelect({
placeholder: 'Select Days',
csvDispCount: 3
});
});
how to implement this? please help me?
I've created a full commented snippet for you:
// when all the elements in the DOM are loaded
document.addEventListener('DOMContentLoaded', function() {
// get both lists and their HTMLOptionElement nodes
var list1 = document.getElementById('day_list_1'),
list2 = document.getElementById('day_list_2'),
options1 = list1.querySelectorAll('option'),
options2 = list2.querySelectorAll('option');
// add event handlers when the lists are changed to call the update function
$(list1).change(update).SumoSelect();
$(list2).change(update).SumoSelect();
function update(e) {
// when the lists are changed, loop through their HTMLOptionElement nodes
var other = (list1 === this) ? list2 : list1;
for (var i = 0; i < options1.length; i++) {
// options of list1 should be disabled if selected in list2 and vice-versa
this[i].selected ? other.sumo.disableItem(i) : other[i].selected ? void 0 : other.sumo.enableItem(i);
}
}
});
.form-control {
width: 130px;
height: 130px;
}
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.min.js"></script>
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_2][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
you can use normal js to achieve this.Use this following code on day_list_1 on onChange event.
document.getElementById("day_list_2").options[document.getElementById("day_list_1").selectedIndex].disabled = true;
Take a look at this jsfiddle
Click here for jsfiddle example
$("#theSelect option[value=" + value + "]").attr('disabled', 'disabled');
But before this, you need to add change event to the first select/dropdownlist. I hope you can take from here..
Try this:
$('#day_list_1').on('change', function() {
$('#day_list_2').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_2').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
$('#day_list_2').on('change', function() {
$('#day_list_1').find('option').removeProp('disabled');
var val = $(this).val() || [];
val.forEach(function(item) {
$('#day_list_1').find('[value=' + item + ']').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label for="day_list_1">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_1" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
<label for="day_list_2">Day</label>
<input type="hidden" value="" />
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>
</select>
First you have to change the id of "day_list_1", because as per HTML standard there is only one id in the entire HTML of any tag.
So you should do like this :
First one :
<select class="form-control" id="day_list_1" multiple="multiple"
name="shift[day_list_1][]">
Next one:
<select class="form-control" id="day_list_2" multiple="multiple" name="shift[day_list_1][]">
Code for validation :
function validate(){
var error = false;
var selected_val_1 = [];
$('#day_list_1 :selected').each(function(i, selected){
selected_val_1[i] = $(selected).text();
});
var selected_val_2 = [];
$('#day_list_2 :selected').each(function(i, selected){
selected_val_2[i] = $(selected).text();
});
$.each(selected_val_1, function( index, value ) {
if($.inArray(value, selected_val_2) != -1){
error = true;
}
});
$.each(selected_val_2, function( index, value ) {
if($.inArray(value, selected_val_1) != -1){
error = true;
}
});
if(error == true){
return true;
}else{
return false;
}
}
I hope it helps you . If you have any query regarding this logic then you can revert me .
Thanks.
It will work fine for 3 drop downs also
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
var $dropdown1 = $("select[name='project_manager[]']");
var $dropdown2 = $("select[name='test_engineer[]']");
var $dropdown3 = $("select[name='viewer[]']");
$dropdown1.change(function() {
$dropdown2.empty().append($dropdown1.find('option').clone());
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
$dropdown2.change(function() {
$dropdown3.empty().append($dropdown2.find('option').clone());
var selectedItem = $(this).val();
if (selectedItem) {
$(selectedItem).each(function(v,selectedItem) {
$dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
});
}
});
});
</script>
</head>
<body>
<select id="project_manager" name="project_manager[]" multiple="multiple">
<option></option>
<option id="option" value="1">Test 1</option>
<option id="option" value="2">Test 2</option>
<option id="option" value="3">Test 3</option>
</select>
<select id="test_engineer" name="test_engineer[]" multiple="multiple" >
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<select name="viewer[]" multiple="multiple">
<option></option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "vrLr9wyg"
}], "*")
}
</script>
</body>
</html>
I have 3 dropdowns which contains more than 4 questions as options in each dropdowns. What I want to achieve is when a user selects one option from any dropdown, that particular option/question has to be hidden from other 2 dropdowns and when he changes his selection that option/question has to be shown again in the other 2 dropdowns. He can select questions from any dropdowns. Here is what I have tried till now. This particular piece of code will hide the options on select but I am not getting how exactly I can show it up back.
Javascript
var removeSelection = function (select) {
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find('option:eq(' + index + ')').hide();
});
};
$(function () {
$('select').change(function () {
removeSelection($(this));
});
});
HTML
<form id="form1">
<select id="select1">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
<select id="select2">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
<select id="select3">
<option id="selectOpt1">Question 1</option>
<option id="selectOpt2">Question 2</option>
<option id="selectOpt3">Question 3</option>
<option id="selectOpt4">Question 4</option>
</select>
</form>
JSFIDDLE-
CLick Here
Updated Fiddle
Updated
Scenario 1 - Select one option from any dropdown.It should be disabled from other dropdowns.
Scenario 2 - Change option from same dropdown. Previous option should be enabled in other dropdowns.
Once you change the duplicate id's to common classes, You can try something like this
$('select').change(function () {
$("option:disabled").prop("disabled",false); // reset the previously disabled options
var $selectedQ = $(this).find("option:selected"); // selected option
var commonClass= $selectedQ.attr("class"); // common class shared by the matching options
$("."+commonClass).not($selectedQ).prop("disabled","disabled"); // disable the matching options other than the selected one
});
Updated Fiddle
(This won't work if there are more than one, different classes for the options, i'd use a common value or data attribute instead like)
$('select').change(function () {
$("option:disabled").prop("disabled", false);
var $selectedQ = $(this).find("option:selected")
var value = $selectedQ.val();
$("option[value='" + value + "']").not($selectedQ).prop("disabled", "disabled");
});
Demo
Update (as per comments)
$('select').change(function () {
var prevMatches = $(this).data("prevMatches");
if (prevMatches) prevMatches.prop("disabled", false)
var $selectedQ = $(this).find("option:selected")
var value = $selectedQ.val();
var $matches = $("option[value='" + value + "']").not($selectedQ);
$matches.prop("disabled", "disabled");
$(this).data("prevMatches", $matches);
});
Demo
You could do something like this:
var removeSelection = function (select) {
var id=select.attr("id");
$(".hide-"+id).show();
$('select').filter(':not(#' + select.attr('id') + ')').each(function () {
var index = select.find(':selected').index();
$(this).find("option").removeClass("hide-"+id);
$(this).find('option:eq(' + index + ')').each(function(){
if($(this).attr("id")!="selectOpt1"){
$(this).addClass("hide-"+id);
}
});
});
$(".hide-"+id).hide();
};
$(function () {
$('select').change(function () {
removeSelection($(this));
});
});
JSFiddle
Take a look
<form id="form1">
<select id="select1">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
<select id="select2">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
<select id="select3">
<option value="Question1">Question 1</option>
<option value="Question2" >Question 2</option>
<option value="Question3" >Question 3</option>
<option value="Question4" >Question 4</option>
</select>
</form>
$(document).on('change','select',function(e){
var elm = $(this);
elm.find('option').show();
$('select').not(elm).find('option',each(function(){
if($(this).attr('value')==$(elm).val()){
$(this).hide();
}else{
$(this).show();
}
}));
});