In the following HTML code I would like to realize the following with JavaScript. When the user selects Audi, he has only the option to select application 2 (application 1 has to disappear in this case).
<select>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
I wrote the code here.
html:
<select>
<option id="app1" value="volvo">Volvo</option>
<option id="app2" value="audi">Audi</option>
</select>
<select>
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
js:
var selections = document.getElementsByTagName('select');
selections[0].onchange = carSelection;
function carSelection(e) {
var first = selections[0];
var id = first.options[first.selectedIndex].id;
var second = selections[1];
var j = 0;
while (second.options[j]) {
second.options[j].disabled = (second.options[j].value != id );
if (second.options[j].value == id)
second.selectedIndex = j;
j++;
}
}
http://jsfiddle.net/U4y2J/3/
Automatically deselect application 1 when Audi is selected.
http://jsfiddle.net/KQMLQ/1/
HTML
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option value="app1">application 1</option>
<option value="app2">application 2</option>
</select>
jQuery
$("#1").click(function() {
if($("#1").val() === 'volvo') {
$("#2").find('option[value="app1"]').removeAttr('disabled');
}
if($("#1").val() === 'audi') {
$("#2").find('option[value="app1"]').attr('disabled', 'disabled').removeAttr('selected');
$("#2").find('option[value="app2"]').removeAttr('disabled');
}
});
HTML:
<select id="1">
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select id="2">
<option id="2a" value="app1">application 1</option>
<option id="2b" value="app2">application 2</option>
</select>
Javascript:
<script type="text/javascript">
document.getElementById("1").onchange = change;
function change(){
var s_a = document.getElementById("1");
var car = s_a.options[s_a.selectedIndex].value;
var s_b = document.getElementById("2");
if(car === "audi"){
s_b.options["2b"].disabled = true ;
s_b.options["2a"].selected = true;
}
else {
s_b.options["2b"].disabled = false ;
}
}
</script>
And link to fiddler
Here is a jQuery version DEMO
where I remove the option when the select is audi - it is removed based on values so you can have as many options you want surrounding the option to remove
var opts=[];
$(function() {
$("#sel2 option").each(function(){ // save all options
var opt = {};
opt.value=this.value;
opt.text=this.text;
opts.push(opt);
});
$("#sel1").on("change",function() { // restore relevant options
var sel = $("#sel2");
sel.empty();
var val = $(this).val();
$.each(opts,function(i,opt) {
if (val == "audi" && opt.value=="app2") return;
sel.append('<option value="'+opt.value+'">'+opt.text+'</option>');
});
});
});
Related
Below is the example of the code for the scenario.
<select class="car" multiple name="cars">
<option value="volvo">Volvo</option>
<option value="honda" selected>honda</option>
<option value="opel" selected>Opel</option>
<option value="audi">Audi</option>
</select>
Suppose if deselect the honda, how would i know that this particular option is deselected and how i will grab that option value in jquery.
Thanks in advance
You can keep some variables and filter out those accordingly.
and in JS, you can handle these variables in the events
Here is the snippet, Hopefully you were looking for the same.
var prevValues = [];
var currentValues = [];
$(document).ready(function() {
currentValues = $('.car').val();
})
$('.car').on('change', function() {
prevValues = [...currentValues];
currentValues = $('.car').val();
let newlyAdded = currentValues.filter(x=> !prevValues.includes(x))[0];
let newlyRemoved = prevValues.filter(x=> !currentValues.includes(x))[0];
if(newlyAdded) {
console.log('Added item', newlyAdded);
}
if( newlyRemoved) {
console.log('Removed Item', newlyRemoved);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="car" multiple name="cars">
<option value="volvo">Volvo</option>
<option value="honda" selected>honda</option>
<option value="opel" selected>Opel</option>
<option value="audi">Audi</option>
</select>
I am trying that when the Change event is launched in a select with the same class as others, the value is retrieved, and if it is equal to one data then select another of the same select. My problem is in, I do not know how to create the selector. I've tried like this, but it does not work. Welcome all the answers
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this + 'option[value="3"]').prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
You can use this keyword to get select element and then use find method to get desired option. You cannot use this like you did in your example. Try running this + 'option[value="3"]' in your console - it will output "[object Window]option[value=\"3\"]", which is not a selector you wanted.
$(function(){
$(document).on('change','.sel',function(){
var val = parseInt( $(this).val() );
if( val === 2 ){
$(this).find("option[value='3']").prop('selected',true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
<select class="sel">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
</select>
$('.sel > option').click(function(e){
var = trueVal = "";
var selectedVal = $(e.target).attr('value');
if(selectedVal == '1'){
trueVal = '2';
} else if(selectedVal == '2'){
trueVal = '3';
}
return trueVal;
console.log(trueVal);
// Do whatever you want with trueValue
});
What I am trying to do is that when an option is selected (for example #4) I get the date from the json object so it would render out: "Monday 26th December". I'm struggling to display this - does anyone know how I could do this please?
https://jsfiddle.net/9L53epre/3/
$(function() {
$('select').change(function() {
var val = $(this).val();
console.log(val);
});
var data = $('#delivery-date').data('delivery-date');
console.log(data);
// console.log(data.item[val]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 4</option>
<option value="4">option 4</option>
</select>
The value in data-delivery-date attribute is a string - use JSON.parse() to convert it into an object - see demo below:
$(function() {
var data = JSON.parse($('#delivery-date').data('delivery-date'));
$('select').change(function() {
var val = $(this).val();
console.log(data[val]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<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>
Your data is a string. You need to convert is to a JSON object first then use dot or array notation to access the members.
$(function() {
$('select').change(function() {
var val = $(this).val();
console.log(val);
});
var data = JSON.parse($('#delivery-date').data('delivery-date'));
console.log(data['7']);
// console.log(data.item[val]);
});
I've updated your fiddle so that it parses your json string and then uses the dataObj[4] to to show the date.
var dataObj = jQuery.parseJSON(data);
https://jsfiddle.net/9L53epre/4/
Use JSON.parse to parse the json string and then you can loop over the object with a for. Try this:
$(function() {
var data = $('#delivery-date').data('delivery-date');
data = JSON.parse(data);
$('select').on('change', function() {
var val = $(this).val();
var data_length = Object.keys(data).length;
for (var k = 1; k < data_length; k++) {
if (val == k) {
$('#output').html(data[k]);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
<option value="5">option 5</option>
<option value="6">option 6</option>
<option value="7">option 7</option>
</select>
<p id='output'>
</p>
Also, if you want to append the values from JSON into the select dinamically, and filter the empty values, you can do it like this:
$(function() {
var data = $('#delivery-date').data('delivery-date');
data = JSON.parse(data);
var data_length = Object.keys(data).length;
for (var i = 1; i < data_length; i++) {
if (data[i] != '') {
$('select').append("<option value=" + i + ">option " + i + "</option>");
}
}
$('select').on('change', function() {
var val = $(this).val();
for (var k in data) {
if (val == k) {
$('#output').html(data[k]);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="delivery-date" data-delivery-date='{"1":"","2":"","3":"","4":"Monday 26th December","5":"","6":"","7":"Friday 23rd December","8":"","9":""}
'></span>
<select>
<option value='default' selected disabled>Select value</option>
</select>
<p id='output'>
</p>
I select other option on one of my ddl and I succeded on getting that value,but in simultaneously I want to get option on other ddl in the code.
How can I get the other ddl option....?
I put here a code example of my issue:
<select id="someIdName" class="selectMenuFromHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</option>
<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 id="someIdName" class="selectMenuTillHour" onchange="someFunc(this)">
<option value="0" selected="selected">(none)</option>
<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>
function someFunc(obj) {
var startHour;
var endHour;
if ($(obj).attr('class') == "selectMenuFromHour") {
startHour = $(obj).val();
//*need to add the value of the class - selectMenuTillHour !
}
if ($(obj).attr('class') == "selectMenuTillHour") {
endHour = $(obj).val();
//*need to add the value of the class selectMenuFromHour!
}
}
You can try this:
$('select').change(function(){
var $this = $(this);
var startHour = 0;
var endHour = 0;
if ($this.hasClass("selectMenuFromHour")) {
$this.find('option').each(function(){
startHour += parseInt($(this).val()) || 0;
});
alert(startHour);
}
if ($this.hasClass("selectMenuTillHour")) {
$this.find('option').each(function(){
endHour += parseInt($(this).val()) || 0;
});
alert(endHour);
}
});
Here is the DEMO.
Say I have this dropdown:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want it so that when the user selects 1, this is the thing that the user can choose for dropdown 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Or if the user selects 2:
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
</select>
Or if the user selects 3:
<select id="theOptions2">
<option value="b">b</option>
<option value="c">c</option>
</select>
I tried the code posted here:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
But it doesn't work for selects.
Please help!
Thank you!
UPDATE:
I really like the answer Paolo Bergantino had on:
jQuery disable SELECT options based on Radio selected (Need support for all browsers)
Is there anyway to modify this to work with selects instead of radio buttons?
jQuery.fn.filterOn = function(radio, values) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({value: $(this).val(), text: $(this).text()});
});
$(select).data('options', options);
$(radio).click(function() {
var options = $(select).empty().data('options');
var haystack = values[$(this).attr('id')];
$.each(options, function(i) {
var option = options[i];
if($.inArray(option.value, haystack) !== -1) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};
This works (tested in Safari 4.0.1, FF 3.0.13):
$(document).ready(function() {
//copy the second select, so we can easily reset it
var selectClone = $('#theOptions2').clone();
$('#theOptions1').change(function() {
var val = parseInt($(this).val());
//reset the second select on each change
$('#theOptions2').html(selectClone.html())
switch(val) {
//if 2 is selected remove C
case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
//if 3 is selected remove A
case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
}
});
});
And the beautiful UI:
<select id="theOptions1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select id="theOptions2">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
You can add classes to your <option>s to store which go with each value of #theOptions1:
<select id="theOptions2">
<option value="a" class="option-1 option-2">a</option>
<option value="b" class="option-1 option-2 option-3">b</option>
<option value="c" class="option-1 option-3">c</option>
</select>
then do this:
$(function() {
var allOptions = $('#theOptions2 option').clone();
$('#theOptions1').change(function() {
var val = $(this).val();
$('#theOptions2').html(allOptions.filter('.option-' + val));
});
});
For the record you can NOT remove options in a select list in Internet Explorer.
try this. this will definitely work
$(document).ready(function () {
var oldValue;
var oldText;
var className = '.ddl';
$(className)
.focus(function () {
oldValue = this.value;
oldText = $(this).find('option:selected').text();
})
.change(function () {
var newSelectedValue = $(this).val();
if (newSelectedValue != "") {
$('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove();
}
if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST
$(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>');
}
$(this).blur();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<form action="/Home/Ex2" method="post">
<select class="ddl" id="A1" name="A1">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A2" name="A2">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A3" name="A3">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<select class="ddl" id="A4" name="A4">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<hr />
<input type="submit" name="submit" value="Save Data" id="btnSubmit" />
</form>
Actually, using the code below will remove a dropdown option just fine in IE, as long as it is not the selected option (it will not work on "a" without deselecting that option first):
var dropDownField = $('#theOptions2');
dropDownField.children('option:contains("b")').remove();
You just run this to remove whatever option you want to remove under a conditional statement with the first group (theOptions1) - that if one of those is selected, you run these lines:
var dropDownField = $('#theOptions2');
if ($('#theOptions1').val() == "2") {
dropDownField.children('option:contains("c")').remove();
}
if ($('#theOptions1').val() == "3") {
$("#theOptions2 :selected").removeAttr("selected");
$('#theOptions2').val('b');
dropDownField.children('option:contains("a")').remove();
}
-Tom