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();
});
Related
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
So I am a newbie on Wordpress working with a theme to make a car platform. Unfortunately, on the theme, the car-selling functionalities differ from what we need. One of those things is: show or hide options based on previous selection with dropdown lists.
Quick example: If 'BMW' is chosen on 'Make', then only show '1 series' '3 series' '5 series' on 'Model', if '3 series is chosen, then only show 318i 320i 330i on 'Engine', aso. From a logical point of view, it is so easy, but I have no clue how to translate this into code. Luckily, I've found pretty good code here already, but this works only for the next dropdown list. My question is, how does the javascript/jquery code have to look like so you can make more than 2 conditional dropdown lists? You could take Engine as an example. Thank you
HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="req_make">Make</label>
<select id="req_make" name="make">
<option disabled="disabled" selected="selected" value="">Choose Make</option>
<option class="BMW" value="BMW">BMW</option>
<option class="Audi" value="Audi">Audi</option>
<option class="VW" value="VW">VW</option>
</select>
<label for="req_model">Model</label>
<select id="req_model" name="model">
<option disabled="disabled" selected="selected" value="">Choose model</option>
<option class="BMW" value="1er">1er</option>
<option class="BMW" value="3er">3er</option>
<option class="BMW" value="5er">5er</option>
<option class="BMW" value="7er">7er</option>
<option class="Audi" value="A4">A4</option>
<option class="Audi" value="A8">A8</option>
<option class="Audi" value="Q7">Q7</option>
<option class="VW" value="Golf">Golf</option>
<option class="VW" value="Touran">Touran</option>
</select>
<label for="req_engine">Engine</label>
<select id="req_engine" name="engine">
<option disabled="disabled" selected="selected" value="">Choose engine</option>
<option class="BMW" value="7er">7er - 730i</option>
<option class="BMW" value="7er">7er - 730Li</option>
<option class="BMW" value="7er">7er - 735i</option>
</select>
Javascript code:
$(function(){
$("#req_make").on("change",function(){
var levelClass = $('#req_make').find('option:selected').attr('class');
console.log(levelClass);
$('#req_model option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});
You can specify any number of selectors to combine into a single result. So change $('#req_model option').each(function () { ... to $('#req_model option, #req_engine option').each(function () { ... to solve this.
I just did it on my own. It is working, but of course I don't know if it's the right way to do it. I am taking the value of the former list and assigning it to the class of the next, while changing attr('class') to attr('value'). https://jsfiddle.net/agdkw1xm/
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 found this simple jQuery Star rating system that I'd like to use, I am following http://jsfiddle.net/ code in my website and it's working fine for one star rating system not for multiple and I have multiple star rating system on one page in my website.
Here is jsfiddle link: http://jsfiddle.net/IrvinDominin/eeG86/
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input" id="rating_simple">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
In above link I had like jQuery drop down but this is working only for one rating system on one page. My problem is I have multiple star rating system on one page.
Your first problem is the fact that you're using IDs, let's alter your markup for each select to use a class:
<select name="my_input" class="rating_simple">
Now we need to update your jQuery to reflect the change (using . instead of #).
Finally, in your change method, you refer to the star rating system using $(".webwidget_rating_simple"), but now we have multiple of these in the DOM, so we need to refer to the one adjacent to the current select that you're changing, using $(this).next(".webwidget_rating_simple").
So finally, your jQuery will look like this:
EDIT we actually need to setup each dropdown individually, this is to prevent the issue within the plugin that will select all dropdowns if you click on one star (it's better to alter the calling code than it is to update the plugin).
$(".rating_simple").each(function () {
$(this).webwidget_rating_simple({
rating_star_length: '5',
rating_initial_value: '',
rating_function_name: ''
});
});
$('.rating_simple').change(function () {
$(this).next(".webwidget_rating_simple").children("li").css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//nst.gif)');
$(this).next(".webwidget_rating_simple").children("li").slice(0,this.value).css('background-image', 'url(http://www.jhwebdesigner.com/rating-system/rating-system//sth.gif)');
});
DEMO
Try this. use different id and name.
<select name="my_input1" id="rating_simple1">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input2" id="rating_simple2">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
<select name="my_input2" id="rating_simple2">
<option value="0" selected="selected">---Select---</option>
<option value="1">Poor</option>
<option value="2">Below Average</option>
<option value="3">Average</option>
<option value="4">Good</option>
<option value="5">Excellent</option>
</select>
I am designing a webform that may capture anywhere from 1 to 150 rows of data giving definitions to what type of data is provided in a given row of a csv. These rows of data are all exactly same but I do not know how many of them will be used at the outset. I would like to start with one row and let the end user click an add button to add a new row. On the W-3 schools website there was a small tutorial on how to do this:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create
but there are some problems I am seeing. first, it is buggy. If you go to the link and click the 'try it' button it will create a simple select dropdown. Wonderful! However, If you click it again it then creates a blank one, with every subsequent click creating the same. The other problem is that the select element I would need to use is huge (160 possible options) and uses optgroups to keep it separated and intuitive here is a sample:
<select name="data_value" id="data_value_selector">
<optgroup label="Entity Provider">
<option style="margin-left:12px;" value="name">Name</option>
<option style="margin-left:12px;" value="dba">DBA</option>
<option style="margin-left:12px;" value="facility_type">Facility Type</option>
</optgroup>
<optgroup label="Individual Provider"></optgroup>
<optgroup style="margin-left:12px;" label="Name">
<option value="full_name">Full Name</option>
<option value="name_prefix">Prefix</option>
<option value="first_name">First Name</option>
<option value="middle_name">Middle Name</option>
<option value="last_name">Last Name</option>
<option value="name_suffix">Suffix</option>
<option value="pro_suffix">Professional Suffix</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Birth Date">
<option value="full_birth_date">Full Birth Date</option>
<option value="day_of_birth">Day Of Birth</option>
<option value="month_of_birth">Month Of Birth</option>
<option value="year_of_birth">Year Of Birth</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Education">
<option value="education_institution">Education Institution</option>
<option value="education_city">Education City</option>
<option value="education_county">Education County</option>
<option value="education_state">Education State</option>
<option value="education_country">Education Country</option>
<option value="education_start_date">Education Start Date</option>
<option value="education_end_date">Education End Date</option>
<option value="graduation_date">Graduation Date</option>
<option value="degree" >Degree</option>
</optgroup>
<optgroup label="Provider Information"></optgroup>
<optgroup style="margin-left:12px;" label="Address">
<option value="full_address">Full Address</option>
<option value="address_1">Address 1</option>
<option value="address_2">Address 2</option>
<option value="address_city">City</option>
<option value="address_county">County</option>
<option value="address_state">State</option>
<option value="address_zip_code">Zipcode</option>
<option value="address_country">Country</option>
<option value="address_csz">City/State/Zip</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Phone">
<option value="phone_number">Number</option>
<option value="phone_extension">Extension</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Singular Values">
<option value="url">URL</option>
<option value="tin">TIN Number</option>
<option value="email">Email</option>
<option value="dea_registration_number">DEA Regisration Number</option>
<option value="npi_number">NPI Number</option>
<option value="upin_number">UPIN Number</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Provider Values">
<option value="provider_value">Provider Value</option>
</optgroup>
</select>
...And this is not even the entire select object. In the W-3 tutorial it builds each element independently as variables and adds them to each other individually. As you can see this might take some time to write and just seems very bulky. I would like to define the select object once and have it replicated that way (if possible) with every click. I imagine each newly created select object would need a unique name, but I am not 100% sure on that. If that is the case, is there a way to just append a 1 to the name of the first one and so on?
If you want something in jQuery you can use clone() function. See:
$("#data_value_selector").clone().appendTo("#select-box");
Demo.
I changed the name attribute to send a collection of the selected values. You can change this behaviour to a custom name in the click event, if you want:
var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");
I hope this helps you.
You could use the cloneNode() method. Here is an example:
http://jsfiddle.net/JKNT4/7/
HTML
<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
<select name="data_value[]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div id="child_selectors"></div>
Javascript
function addRow() {
var itm = document.getElementById("parent_selector");
var cln = itm.cloneNode(true);
cln.removeAttribute("id");
document.getElementById("child_selectors").appendChild(cln);
}