I posted a similar question a few days ago, but it seems that the reference solution did not work as there seemed to be a bootstrap conflict, where the jQuery was affecting the select element instead of the additional divs generated by bootstrap
For reference, I have a 2 <select> elements which look like the following:
<select class="selectpicker form-control alternate-linked-select-box" id="input-room">
<option>...</option>
</select>
The intended, functionality I am trying to achieve, is to completely deselect the other element when the current <select> element has been changed.
The previously proposed solution with jQuery was this. I'll also include it here for reference:
var sels = $(".alternate-linked-select-box").on("change", e =>
sels.not(e.target).find("option:selected").prop("selected", false)
);
However, this does not work with bootstrap as the select elements do not seem to be affected.
Since then, I've also tried disabling everything to see if it had any affect, but to no avail.
$('.alternate-linked-select-box').selectpicker('val', '');
I presume I am doing something very wrong, as I have never really used bootstrap before. Any help is appreciated!
For example you have 2 selections with id input-room1 and input-room2, apply below code to reset room2 selection when room1 selection is changed.
$(document).ready(function(){
//init
$("#input-room1").prop("selectedIndex", -1);
$("#input-room2").prop("selectedIndex", -1);
})
$('#input-room1').on('change',function(){
$("#input-room2").prop("selectedIndex", -1);
})
Related
I have a drop down select tag like so :
<select id="thisDropDown" onChange="doSomething()">
<option></option>
<option>classif</option>
<option>status</option>
</select>
Notice I'm using the onChange();
What I need is the ability to re-click an option in my drop down so it runs the function again (as I can change other drop downs which affect the outcome of running this function).
I have tried onselect() and onclick() but none seem to work. Do I have to write a bit of script ? I have been looking online but can't seem to find something that will work.
Thanks in advance, sorry if something similar has been asked before
We can achieve this but with minor tweaks which are required based on the browser
JSFiddle link https://jsfiddle.net/0kxe6br7/2/
var dom = "select#thisDropDown";
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if(is_firefox){
dom+=" option";
}
$(dom).on("click",function(event) {
console.log($(event.currentTarget).val());
});
Hej,
This can be done with jquery
$('#thisDropDown').on('mouseup', function() {
alert('select option');
});
I'm currently in trouble with a select/select2 and jQuery $.clone issue.
In a html form with html select boxes replaced with select2 but the select2 jQuery plugin is not really relevant for this issue.
I experience problems when I use jQuery $.clone(true, true) to get a copy of a form to work on it.
When I try the following:
window.clone = $('#formSelector').clone(true,true);
The selected values are cloned and get lost. See http://jsfiddle.net/straeger/ct31f34c/9/
Even If I try to remove select2 with the call the cloned select boxes do not hold the selected values.
$('select').select2('destroy');
window.clone = $('#formSelector').clone(true,true);
see: http://jsfiddle.net/straeger/dokenyss/1/
A small hack with a big drawback (if no ID is present) is to copy the selected values to the clone:
$clone.find('select')
.each(function(index, value){
var $el = $(value);
$el.val($element.find('#'+$el.attr('id')).val());
});
see: http://jsfiddle.net/straeger/ct31f34c/10/
My question is what would be the correct way to handle such a problem ?
Does anyone know a way to select the counterpart of the original element from the original jQuery element if I have no ID?
Or a way to persist the currently selected option ? via the attribute e.g.
<option value="c" selected>C Value</selected>
I have this select drop-down where in my drop-down when i select one of the choices the div for that particular choice will be displayed and the rest will remain hidden.
I tried using this Demo but it don't work.
<form id="nl-form" class="nl-form">
<select id="choices">
<option value="family" selected>family</option>
<option value="closefriend">close friend</option>
<option value="acquaintance">acquaintance</option>
</select>
<div class="nl-overlay"></div>
</form>
<div id="family" class="chosentree">family</div>
<div id="closefriend" class="chosentree">closefriends</div>
<div id="acquaintance" class="chosentree">acquaintance</div>
$(function() {
$('.chosentree').hide();
$('#choices').change(function(){
//$('.chosentree').hide();
$('#' + $(this).val()).show();
});
});
What could be the problem?
and also on the div family, I want to place this ff. Demo how should it be done? Notice that it has a link script file check external sources in jsfiddle
I'm new with this and I don't know what should be the proper placing of codes.
your code need
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>// you can add what ever is latest version available.
since you have written change event better add a dummy select option like:
<option value="select" selected>select</option>
otherwise it is working.
Here is your working demo after loading above library
FiddleDemo
I solved it by putting
$(this.elOriginal).find('option').removeAttr("selected");
$(this.elOriginal).find('option:eq('+this.selectedIdx+')').attr("selected", "selected");
$(this.elOriginal).trigger('change');
in close function in nlform.js
Then by listening to change event of the select element I get my goodies!
Not sure if this is still relevant, but nl-form doesn't actually use the select inputs. If you observe the page in Firebug, you'll notice the actual Select elements have a visibility of "none". What nl-form does is actually take the options in the select that you create and turns them into a series of different html elements (div, a, and ul elements). So when you change an option on an nl-form select, you cannot listen for the change event because it doesn't actually happen.
It turns out it's not real easy or fun to do. What I did to monitor the changes was create a custom event at the bottom of the close() method in nlform.js. Then in my javascript, I listened for that particular event and had to write a lot of javascript to find the elements I needed...it did eventually work. It's a lot of work though.
I am dynamically generating some dropdowns and then allowing them some of those to be removed on board dyanmically. so that time, i have encountered an error of selection option (dropdown) elements id mismatch. something like below is.
newly added dropdowns.
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][1]" id="client_time_window_1">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
after i dynamically remove them via javascript. (lets say i am removing the second one) so then new ones will be displayed as followings,
select name="CSSAtapsClient[client_time_window_arr][0]" id="client_time_window_0">/select>
select name="CSSAtapsClient[client_time_window_arr][2]" id="client_time_window_2">/select>
select name="CSSAtapsClient[client_time_window_arr][3]" id="client_time_window_3">/select>
So now the issue i have is, the names of the dropdowns are like this, (0,2,3)
CSSAtapsClient[client_time_window_arr][0],
CSSAtapsClient[client_time_window_arr][2],
CSSAtapsClient[client_time_window_arr][3]
So this is causing an error for me and i need to reorder this name and make it be like this, (0,1,2)
CSSAtapsClient[client_time_window_arr][0]
CSSAtapsClient[client_time_window_arr][1]
CSSAtapsClient[client_time_window_arr][2]
how can i simply rename these dropdowns name attribute (from 0 to how much ever dropdows are exisiting) ? appreciate an early reply
EDIT 1
I tried this, but didnt work.
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][i]");
});
You can simply reset the values using .attr() method:
$('#tbl_dynamic_call_dates select').attr('name', function(i) {
return 'CSSAtapsClient[client_time_window_arr]['+ i +']';
});
I did this,
$('#tbl_dynamic_call_dates select').each(function(i){
$(this).attr('name',"CSSAtapsClient[client_time_window_arr][" + i + "]");
});
I am wanting to try to change or limit a drop down list using JavaScript, or some other solution. Unfortunately, I have no control over the way the HTML comes out that I am trying to change client side. The drop down list is generated server side, but we would like to give the user additional options to further limit the choices in the drop down list.
We can't edit what is generated, but we can insert HTML.
One suggested solution, which may not be possible, is to use JavaScript to limit the dropdown list. For example, the drop down follows the format of:
<SELECT ID="dropdown_1">
<OPTION VALUE="" >None
<OPTION VALUE="1000">AB-ITEM 1 DESCRIPTION
<OPTION VALUE="2001">AB-ITEM 2 DESCRIPTION
<OPTION VALUE="50" >AB-ITEM 8 DESCRIPTION
<OPTION VALUE="70" >BB-ITEM 3 DESCRIPTION
<OPTION VALUE="100" >BB-ITEM 5 DESCRIPTION
<OPTION VALUE="2" >ABB-ITEM 4 DESCRIPTION
</SELECT>
What I want to limit by the beginning of the text, so AB-, BB-, or ABB- in this case. The value has no rhyme or reason, it's just an index number. I don't think this is possible since this is just text, and not associated with an attribute.
One thought would be to be to:
Store the list into a JavaScript array
Keep only entries like 'TYPE-X%'
Delete original HTML list
Replace with new list stored in the Array
However, I'm not sure if this is possible, and if it is, what would be needed to create such code. Any help or references to functions or examples would be greatly appreciated.
Anything is possible (with jQuery):
$(document).ready(function() {
$("#dropdown_1 option").hide();
$("#dropdown_1 option").filter(":contains(TYPE-X)").show();
});
An advantage with this is that all of the options are still there, you just can't see them. So all it would take to return to the default list would be a call to:
$("#dropdown_1 option").show();
Edit for regex:
$(document).ready(function() {
$("#dropdown_1 option").hide();
$("#dropdown_1 option").filter(function() {
return $(this).text().match(/^AB-/);
}).show();
});
You can filter your list using a regex like seen above.
Edit: A note about jQuery, this in the filter function is the DOM element itself. In order to access the jQuery helper method text(), I first need to wrap that DOM element with the jQuery function, as edited above.
Thanks to BinaryTox1n, I was put on a good path to find an all-browser compatible solution to my question. However, it is a slightly different approach pieced together from other solutions on StackOverFlow.
The difference comes is how one deals with the OPTIONs. Though .hide() works on some browsers, it is not compatible with IE8 (and maybe some others). Alternatives and variations to .hide() also failed. Another problem with .hide() is that you also need to use .disable(). The last problem is that if you have several (20 or so) options and only 2 or 3 are visible, Chrome (and perhaps other browsers) do not render the dropdown box properly.
The best approach found is to .remove() unwanted options. No compatibility issues because the OPTION is simply removed. However, I also want to have the flexibility to add back options if needed. So the following is a version of what I'll be using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var regex_str = "^AAB-";
var dd1 = $("#dropdown1 option");
//Clone the 'None', Current, and All options into respective variables.
//All options are stored in order to allow different selection criteria
var all_Opt = dd1.clone(true);
var none_Opt = dd1.filter(":contains(None)").clone(true);
var cur_Opt = dd1.filter(function(){
return $(this).text().match(regex_str);
}).clone(true);
//Remove all options and replace the 'None' and Current options
dd1.remove();
noneOpt.appendTo($("#dropdown1"));
curOpt.appendTo($("#dropdown1"));
});
</script>
The only thing I'd like to add is the ability for this to change using a different drop down box or some other trigger.