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
Related
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 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;
}
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.
first post here, I come in peace :) I've searched but can't quite find what I'm after.
I am trying to manipulate the selected option of a select box. Can someone please explain why this works:
$('#some_select_box').click(function() {
$('#some_select_box option:selected').remove();
});
but this doesn't:
$('#some_select_box').click(function() {
$('this option:selected').remove();
});
I just want to use "this" instead of spelling out the id of the select box - can someone point me in the right direction for the correct syntax? It's driving me mad because it looks like it should be really simple. And I'm sure it is to someone, but not me, cos its the end of the day and I'm brain-fried... Any pointers much appreciated.
Cheers
this isn't a css selector.
you can avoid spelling the id of this by passing it as a context:
$('option:selected', this).remove();
http://api.jquery.com/jQuery/
$('#some_select_box').click(function() {
$(this).find('option:selected').remove();
});
Using the find method.
This should do the trick:
$('#some_select_box').click(function() {
$('option:selected', this ).remove();
});
This is a simpler one
$('#some_select_box').find('option:selected').remove().end();
$('#some_select_box option:selected').remove();
The above option works in create form, but the most accurate method is to remove only the disabled value, why?
think about it, when you want to use it in the edit form you need to remove only the disabled selected option otherwise it will remove all selected options from the multi-select dropdown.
remove disbaled value from dropdown
$('#some_select_box').find('option:disabled').remove().end();
above will remove option like below
<select id="some_select_box" multiple>
<option disabled selected>Choose Option</option>
</select>