I have hidden div tags in my html which i want to display them when a user select some category, but i have more hidden divs becuase its a big site. And i should display them when a user select certain category.
My problem here is that i'm new to jQuery and i really dont know if this is the right way but i know that i have problem doing like this way in this fiddle :
Here is a fiddle to check
There is no problem when i first select the first category but then when i select some other and back again to the first problem dont work properly. I dont understand where can be the problem.
Or should i use this all slideDown in one category on change function ?
If someone can help me here in this situations and give me a very proper way of using slideDown like in this situations.
Thanks.
i would do it this way
$(document).ready(function () {
$('#dropdown').on('change', function () {
$('.common-class-for-all-hidden-divs').hide();
var selection = $(this).val();
$('#category_show_'+selection).show('slow');
});
});
one of the hidden divs example
<div id="category_show_3" class="common-class-for-all-hidden-divs" >
<select name="category_show_3">
<option value="">category_show_3</option>
<option value="1">category_show_3</option>
<option value="2">category_show_3</option>
<option value="3">category_show_3</option>
<option value="4">category_show_3</option>
<option value="5">category_show_3</option>
</select>
</div>
css part --
.common-class-for-all-hidden-divs{
display:none;
}
Related
I am writting a javascript program that needs to be able to select an element on a dropdown and then continue browsing. My problem is that even though I can select a dropdown element and that I can see the dropdown change on the website, the element I have selected doesn't seem to be "registered" and when I continue my browsing, the dropdown is back to the default option.
I figured out that maybe the website needs a mouse click to register the change so I have tried clicking on the dorpdown after selecting the right option but it still doesn't work.
Here is the different codes I have tried and which seems to both have the same problem :
//first try:
document.getElementById('SingleOptionSelector-0').selectedIndex = 2;
//second try :
document.getElementById('SingleOptionSelector-0').value = '3';
I tried to click on the dropdown menu like this:
document.getElementById('SingleOptionSelector-0').click();
But it doesn't expand. It's like the click is not registered which seems very strange to me because when I click somewhere else on the web-page it works just fine
I have seen a lot of questions about how to interact with a dropdown menu,but no one else seems to have the problem that when you change the value it is not registered by the web-page
The relevant HTML is below:
<select class="single-option-selector single-option-selector-product-template_original product-form__input" id="SingleOptionSelector-0" data-index="option1">
<option value="1">Hamburger</option>
<option value=" 2">fries</option>
<option value="3">Coke</option>
<option value="4">Diet Coke</option>
</select>
edit : It seems that I was not clear enough. An example of my problem is the website https://www.xhibition.co/collections/air-jordan/products/jordan-23-engineered-full-zip-jacket?variant=29510378848328 . When I use one of these methods to change the "size" dropdown, I can see it changing but when going to the basket, the size of the element I just added is the default one ('M'). That's what I mean by the website "not registering" the dropdown change.
Try this.
document.getElementById('myDropDown').value = "2"
Your question is kind of vague, but I think the sample below should give you a good idea of how to get and set select element values and also how to use addEventListener to know when a change event has taken place:
const selectEl0 = document.querySelector('#SingleOptionSelector-0');
const selectEl1 = document.querySelector('#SingleOptionSelector-1');
const onChange = e => selectEl1.value = e.target.value;
selectEl0.addEventListener('change', onChange)
The second select element will update it's value when the first one changes:<br/>
<select class="single-option-selector single-option-selector-product-template_original product-form__input" id="SingleOptionSelector-0" data-index="option1">
<option value="1">Hamburger</option>
<option value="2">fries</option>
<option value="3">Coke</option>
<option value="4">Diet Coke</option>
</select>
<select class="single-option-selector single-option-selector-product-template_original product-form__input" id="SingleOptionSelector-1" data-index="option1">
<option value="1">Hamburger</option>
<option value="2">fries</option>
<option value="3">Coke</option>
<option value="4">Diet Coke</option>
</select>
I'm facing an issue in selecting the dropdown first value after selecting it for the first time. When the dropdown options slidedown to select, the first value would be selected by default,bcoz of which I'm not able to select the first value. I'm using JQuery mobile framework and I'm writing custom JS to change the dropdown. I need to handle this dropdown only using custom JS and cannot make the dropdown work with this custom logic due to some other issue with my project.
Here first value im referring as 'US' from dropdown
The solution for this issue would be really appreciated. Thanks in advance.
HTML:
<select id="drpDwn">
<option value="" disabled="disabled">select</option>
<option value="US">US</option>
<option value="AU">AU</option>
<option value="NZ">NZ</option>
</select>
JS:
$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css
Check out this JSFiddle
The difference maker was modifying:
$(this).find('option').removeAttr('selected');
Into:
$(this).find('option:not(:selected)').removeAttr('selected');
When 'change' was triggered, the selected attribute is added to the new option, so you were stripping it away from everything even the new selection. That's why the option never changed.
Using :not(:selected) came in handy then since it will only strip away the attribute from things that weren't the current selected option.
I have a selectable tree, where i have users, then i want to select them on the left, then click on the button "right" and send it to the right side div, and if i need to remove it from the right side, i want to select it on the right side and click the button "left".
I'm trying for over 2 days but i dont have any idea how to start, can someone help me?
Here's the jsfiddle working, hope that helps understanding.
This its what i have from jquery so far:
$(function () {
$('#jstree1').jstree({
"plugins": ["wholerow", "checkbox"]
});
});
http://jsfiddle.net/JC9gM/
To understand better what i need, here's a example, but i need with the jsTree plugin:
Working example: http://www.akchauhan.com/examples/example01/
I solved a similar problem with this plugin multiselect.js. It is easy to use and if you do not need it to look like a tree, it will work.
<select id="users" multiple="multiple">
<optgroup label="1">
<option>1.A</option>
<optgroup label="1.B">
<option>1.B.I</option>
<option>1.B.II</option>
</optgroup>
</optgroup>
<option>2</option>
</select>
<script>
$('#users').multiSelect({
selectableOptgroup: true
});
</script>
Check out the "optgroup" in Demos section to see it working
I need to open the Chosen dropdown via JavaScript so users do not have to click on the select to show it, how can this be done?
You can open a chosen select box via JS by doing:
$('#<id-of-your-select>_chzn').trigger('mousedown');
where <id-of-your-select> is the id of your <select> element.
For ex: if your <select> element is like <select id="foo" ...>, then the code above will become:
$('#foo_chzn').trigger('mousedown');
It is very weird but i find answer is using timeout
it somehow neet to timeout first
maybe because my element is cloned
hope useful for others
setTimeout(function(){ firstElement.trigger("chosen:open"); }, 100);
you can add the below two lines to your code it will keep your chosen always open. It worked for me.
list_start is your select element id.
("#list_start").trigger('chosen:open');
$('.chosen-drop').css('left', 0);
In the updated Chosen jquery plugin following works fine with stopPropagation.
$("#selectbox").trigger("chosen:open");
event.stopPropagation();
$(document).ready(function() {
$("#selectbox").chosen({});
$("button").click(function() {
$("#selectbox").trigger("chosen:open");
event.stopPropagation();
});
});
#selectbox {
width: 140px
}
<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="selectbox">
<option val="option1">Option 1</option>
<option val="option2">Option 2</option>
<option val="option3">Option 3</option>
<option val="option4">Option 4</option>
<option val="option5">Option 5</option>
<option val="option6">Option 6</option>
</select>
<button>Trigger Chosen</button>
#tzvi's answer is valuable in the in the event that you're trying to trigger chosen so that it stays open after a selection is made (IE: making multiple selections in one go). Allow me to extend this a bit (updated for chosen 1.0, by the way):
$('#selectbox').change(function() {
$('#selectbox_chosen .chosen-drop').css('left', '0');
});
$('html').click(function() {
$('#selectbox_chosen .chosen-drop').css('left', '');
});
$('#selectbox_chosen .chosen-drop').click(function(e) {
e.stopPropagation();
});
Essentially it forces the chosen dropdown to stay open by overriding some css that is usually in place by the "active" class. Then we have a couple of click events that will undo this if you click anywhere outside off the dropdown. Worked perfectly for me.
Edit:
By the way, if you really want to trigger the drop down via JS, use Chosen 1.0's API:
$('#selectbox').trigger('chosen:open')
In context of the original question, this will allow you to open the box or reopen the box after a selection is made. It will not, however, keep the box open after a selection is made (without closing for a moment).
This solves the problem,
just make sure chzn-select is the ID of your select.
chzn-drop will stay opened after users click on an option:
$('#chzn-select').change(function(event)
{
$('.chzn-drop').css('left', 0);
});
I have a select form with several options. I also have a div that I would like to show ONLY when a particular option is selected. Could you guys point me in the right direction? What would be the easiest thing to use for this?
Thank you :)
Here is a simple and non-jQuery solution
window.onload=function() {
var sel = document.getElementById("sel1");
sel.onchange=function() {
document.getElementById("otherDiv").style.display=(this.value=="other")?"":"none";
}
sel.onchange(); // set the visibility onload too in case of reload
}
<select id="sel1">
.
.
.
<option value="other">Other</option>
</select>
<div id="otherDiv">Other options</div>
jQuery is a powerful javascript library that makes this kind of task trivial. Here is an example of what you're trying to do using it: jQuery - Using the radio button to show/hide a div.