I'm using this plugin to get chained select's.
It's working with desktop browser (FF, Chrome, etc...) but when I want to use it on my iPhone it's not working.
I can select options from first select (for example city). When I select city, my second select should have locals from this city and that's what not working on iOS, second select is disabled all the time. I tried modify chained code and added
tap, touchstart
but it doesn't help.
$("#locals").chained("#city");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/tuupola/jquery_chained/2.x/jquery.chained.js"></script>
<select id="city" name="city">
<option value="Select city">Select city</option>
<option value="CityA">City A</option>
<option value="CityB">City B</option>
</select>
<select id="locals" name="locals">
<option value="Select local">Select local</option>
<option value="Local A" data-chained="CityA">Local A</option>
<option value="Local A-1" data-chained="CityA">Local A-1</option>
<option value="Local B-1" data-chained="CityB">Local B-1</option>
<option value="Local B-2" data-chained="CityB">Local B-2</option>
<option value="Local B-3" data-chained="CityB">Local B-3</option>
</select>
Instead of
$("#locals").chained("#city");
please replace by
$(document).ready(function() {
$("#locals").chained("#city");
});
detail please watch at https://www.youtube.com/watch?v=YL6BwAZnUag
Related
Need some help with this. I have a drop down list which is part of form but i need only one select to be a link using something that will active once clicked. Not sure is window.open is the correct thing to use.
Here is the code i'm using but at present all select are links and i only need 'other' to be it.
<select name="model" onchange="window.open(this.value, '_blank')">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="http://to be a link ">Other..</option>
</select>
Is this possible to do?
You can try something like this. If the value is an URL you can open a new window.
<select name="model" onchange="this.value.includes('http') && window.open(this.value, '_blank')">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="http://to be a link ">Other..</option>
</select>
You can try this
I do not recommend using inline event handlers
NOTE: The script will not actually run here from a stacksnippet due to sandboxing
document.querySelector("[name=model]").addEventListener("change", function() {
const val = this.value;
if (val.startsWith("http")) {
console.log("This will open",val)
window.open(val, "_blank")
}
})
<select name="model">
<option value="" selected>Please select</option>
<option value="A">Apple</option>
<option value="B">Boom</option>
<option value="C">chin</option>
<option value="https://to be a link ">Other..</option>
</select>
Bit of a weird one, not sure if this is possible or not.
The system I am working on has a sort by select element which has 'Recommended Products' as the selected option on load as this is the order in which they'd like the products to be when a user hits the page, but they also want it to say 'Sort By' be default so that it's obvious this is a sort by element. Unfortunately I can't change the core HTML, I can only modify via jQuery/Javascript.
Just wondering if there was a way to do this with jQuery or not, as the method I've tried have interfered with the default select so far. Is it even possible to have a default placeholder as well as another option selected to dictate the load in state?
Cheers!
Current HTML
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Desired HTML
<select id="sort-by-select">
<option value="#" selected="" disabled="disabled">Sort By</option>
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
As pointed out in the comments, you can only have one default/selected option. What you could do instead is add a label via jQuery, using .insertBefore():
$(function() {
var $label = $('<label>').text('Sort By:').attr('for', 'sort-by-select');
$label.insertBefore($('#sort-by-select'));
});
label { margin-right: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
Alternatively, you could prepend "Sort by" to every option in the select, using .text():
$(function() {
$('#sort-by-select option').text(function () {
return 'Sort by: ' + $(this).text();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="sort-by-select">
<option value="#" selected="">Recommended Products</option>
<option value="#">Price (High to Low)</option>
<option value="#">Price (Low to High)</option>
<option value="#">Newest In</option>
<option value="#">Most Popular</option>
</select>
I have found plenty of tutorials on how to change the arrow colors of a however they don't work where multiple is set to multiple="multiple" and I have TWO arrows rather than one.
The website is textatradesman.com, The HTML is as follow:
<select id="select" multiple="multiple">
<option class="clicktoselect" value="">Click or Tap to Select</option>
<option value="http://www.Textabuilder.co.uk/">TextA Builder.co.uk</option>
<option value="http://www.Textaplumber.co.uk/">TextA Plumber.co.uk</option>
<option value="http://www.Textalocksmith.co.uk/">TextA Locksmith.co.uk</option>
<option value="http://www.Textahandyman.co.uk/">TextA Handyman.co.uk</option>
<option value="http://www.Textapainter.co.uk/">TextA Painter.co.uk</option>
<option value="http://www.Textacarpenter.co.uk/">TextA Carpenter.co.uk</option>
<option value="http://www.Textaplasterer.co.uk/">TextA Plasterer.co.uk</option>
<option value="http://www.Textatiler.co.uk/">TextA Tiler.co.uk</option>
<option value="http://www.Textabricklayer.co.uk/">TextA Bricklayer.co.uk</option>
<option value="http://www.Textaboilerrepair.co.uk/">TextA Boilerrepair.co.uk</option>
<option value=".">A - Z List of trades below....</option>
<option value="http://www.TextaApplianceRepair.co.uk/">TextA ApplianceRepair.co.uk</option>
<option value="http://www.textanacrepair.co.uk/">TextA ACRepair.co.uk</option>
<option value="http://www.textanalarmfitter.co.uk/">TextA AlarmFitter.co.uk</option>
<option value="http://www.Textaarchitect.co.uk/">TextA Architect.co.uk</option>
<option value="http://www.textaasphalter.co.uk/">TextA Asphalter.co.uk</option>
<option value="http://www.Textafrenchpolisher.co.uk/">TextA FrenchPolisher.co.uk</option>
<option value="http://www.Textagaragedoorfitter.co.uk/">TextA GarageDoorFitter.co.uk</option>
<option value="http://www.Textagardener.co.uk/">TextA Gardener.co.uk</option>
<option value="http://www.Textawindowfitter.co.uk/">TextA WindowFitter.co.uk</option>
</select>
Yes.
Simple <select> has one arrow. Multiple <select> has two arrows. What's the problem? If you don't like arrows, you can add a combo plugin like chosen or select2 from jquery.
You can explain better the problem and what you like to achieve.
I am using the Jquery multi select tool located here http://www.erichynds.com/blog/jquery-ui-multiselect-widget and I got everything working great. I have a very long list of items and divded by optgroups. You have to scroll quite a lot of get to the last item so im wondering if theres a way to collapse the opt group by default?
I looked at documentation regarding this script but didn't see any functions to collapse by optgroup.
<select name="selSea" id="selSeaShells" size="5" multiple="multiple" onchange="loopSelected()">
<optgroup label="Group 1"/>
<option value="test">test</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<optgroup label="Group2"/>
<option value="test">test</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
<optgroup label="Group3"/>
<option value="test">test</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
<option value="test3">test3</option>
<option value="test4">test4</option>
</select>
You may try Select2. Also, you may refer to this Stackoverflow discussion.
Using Select2:
In your CSS, hide the sub results by default:
.select2-result-sub > li.select2-result {
display: none;
}
Then add this to your Javascript file:
$('.select2-results').on('click', 'li', function(){
$(this).find('li').show();
});
Here is what I've started to do: http://jsfiddle.net/nd9ny/
For now it doesn't work as I want it to.
I want to update options each time when a new select input is added or an input is removed.
For example, we have our first select input with these options:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
And then, If I remove the first input, the second one becomes:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
Pure Javascript code needed.
You may try the following solution:
- CSS:
.hidden {
display: none;
}
- JS function:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
- HTML example:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
Note: This function was tested with Firefox, you may have to check if this works with other browsers.
Hope this helps