I'm trying to get two bootstrap-select forms that use the same JS, but don't affect each other (when one is clicked, the other doesn't change). It should be two lists of names of colours, with them appearing in the colours described in all instances (in the list, the first entry seen before clicked, and the entry seen after one is clicked). I have a JSFiddle example which is some of the way there. I want to keep the hover behaviour I have in my example, where the text colour is retained when the mouse hovers over and the background becomes only slightly greyer, unlike the default behaviour where the text goes white and the background goes blue. I realise both of my forms have the same ID of "select" and need to be different, but looking at the top form the way it is now can at least demonstrate the kind of behaviour that I want for both.
As a JSFiddle
HTML
<div class="selectContainer">
<select class="form-control pickerSelectClass" id="select">
<option value="red" style="color:red">Red</option>
<option value="blue" style="color:blue">Blue</option>
</select>
</div>
<div class="selectContainer">
<select class="form-control pickerSelectClass" id="select">
<option value="red" style="color:red">Red</option>
<option value="blue" style="color:blue">Blue</option>
</select>
</div>
JS
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$("#select").selectpicker("refresh");
$('.filter-option').css("color",$('#select').val());
$('#select').on('change', function(){
$('.filter-option').css('color', $(this).val());
});
});
This works. Also make sure that the ids are unique.
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$('select').each(function(index, item){
$(this).parent().find('.filter-option').css("color",$(this).val());
}).on('change', function(){
$(this).parent().find('.filter-option').css("color",$(this).val());
});
});
Related
Using the chosen lib I run into the following issue, you can reproduce it yourself by going to their show-and-tell-page:
https://harvesthq.github.io/chosen/
Steps to reproduce:
In their standard select section, select -any country you want- in both the standard dropdown and the chosen dropdown
Click 'fork on github'(or any link) to leave the page
Navigate back by hitting the back button in chrome
The standard dropdown shows you the previously selected country
The chosen dropdown is empty (but under the hood the value is selected, according to what I'm seeing with my form. It just is not showing)
So this leads to confusion. When the user would back and then go forward again by submitting the form(in my case) it would use another value than what is shown.
My form basically looks like:
<form id="myForm" action="${home}mySite/foo/bar" method="GET">
<select id="bar" name="barName" class="chosen-select">
<option value="a">foo 1</option>
<option value="b">foo 2</option>
<option value="c">foo 3</option>
<option value="d">foo 4</option>
</select>
<input type="submit" value="Continue"/>
</form>
If I remove the class="chosen-select" it works as I expect, but I lose chosen's nice search feature which I want. I've tried messing around with
<option value="a" selected="selected">Foo 1</option>
in the dropdown, but that doesn't help.
I've also tried changing the method="GET" to POST but there is no difference in behaviour. It still works as in the example link I provided.
The chosen lib generates the following in on the page:
<div class="chosen-container chosen-container-single" title="" id="parkingZoneOwner_chosen" style="width: 40%;"><a class="chosen-single">
<span>Foo 1</span>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div></div>
But nothing about the generated html looks wrong to me, even after backing to the page.
I tried this in the js (events):
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$(".chosen-select").chosen({
width: "40%",
search_contains: true
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
$(".chosen-select").val("a");
});
});
});
$('.chosen-select').on('chosen:ready', function(evt, params) {
// alert("reached")
// I had really high hopes for this one:
$('.chosen-select').trigger('chosen:updated');
//Also tried this one:
$('#myForm')[0].reset();
});
Anyone know a way to fix this? Either the chosen dropdown needs to show what actually will be submitted in the form or the entire form maybe could be reset to default values somehow.
This solved it in the end, turning off autocomplete on the form.
<form id="myForm" action="${home}mySite/foo/bar" autocomplete="off" method="GET">
I don't know why this works.
My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.
Using JQuery I'm trying to create a drop-down menu and then change a certain value on a search input element based on what people select in the menu.
So far I've figured out how to target the value I need to change. I've also gotten as far as having it so that if someone makes any selection from the menu, it changes the search input value to one specific value:
<div>
<form action="setColor" method="post">
<fieldset>
<label for="color">Select A Color</label>
<select name="color" id="color">
<option>Blue</option>
<option selected="selected">Red</option>
<option>Yellow</option>
</select>
</fieldset>
</form>
</div>
<script>
$(function() {
$('select[name="color"]').change(function() {
$('input[name="ancestorId"]').val("9999");
});
});
</script>
What I need now is something that sets the value according to the menu selection, matched up something like this:
Blue = 9999
Red = 8888
Yellow = 7777
I'm still looking at examples and will keep trying, but kind of stuck. Any advice appreciated.
You should put the value assignment in the option elements, as they were designed for just that:
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
And the script nearly stays the same, except I've used the elements IDs instead of their names in the selectors (assuming here your ancestor element has such an ID):
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
Note that the chained .change() call will trigger the change event that was just assigned, so that the pre-selected item's value will be populated into the text field when the page loads.
See it in action:
$(function() {
$('#color').change(function() {
$('#ancestor').val($(this).val());
}).change(); // Trigger the event
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="color" id="color">
<option value="9999">Blue</option>
<option value="8888" selected="selected">Red</option>
<option value="7777">Yellow</option>
</select>
<input id="ancestor" type="text" />
How do I use jquery to find the position of the currently selected option, it also needs to update in real time if the user selects a different option.
<select id="visa_type_c" title="" name="visa_type_c">
<option selected="selected" value="No Visa" label="No Visa">No Visa</option>
<option value="EU Visa" label="EU Visa">EU Visa</option>
<option value="Easy Visa" label="Easy Visa">Easy Visa</option>
<option value="Hard Visa" label="Hard Visa">Hard Visa</option>
</select>
I seen the other threads but they are slightly different and I cant seem to make it work right for me.
Can just use pure JS:
document.getElementById("visa_type_c").onchange = function() {
alert(this.selectedIndex);
}
Pure JS Demo: http://jsfiddle.net/Xxqnr/1/
$("select").on("change", function(ev) {
console.log(ev.target.selectedIndex);
});
<a href='javascript:alert($("#visa_type_c option:selected").index())';>click for index</a>
Lots of ways to do it; if you add this to your page it will show you the selected index.
I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>
Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});
Try this
$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/