This is my example.
<select name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4">val4</option>
<option value="val5">val5</option>
<option value="val6">val6</option>
</select>
as you can see, we have a select box with different options.
What i want to do is to hide option with val2 and val5, but add another option to the end of the list like <option value="more">more</option>.
By clicking "more" the hidden options should be shown. the option "more" should be replaced by an option "less". By clicking less the options should be hidden again.
Please keep in mind that this is only an example. The full list contains more than 50 options. Would it be useful to some kind of array?
Unfortunately I have no idea how to start.
Any help on this would be greatly appreciated. Thanks.
UPDATE
Please have a look at my comments in the js-Part http://jsfiddle.net/bqyBQ/5/
I would try something like this
<select id="mydropdownbox" name="mydropdownbox">
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
<option value="val4" class="hide">val4</option>
<option value="val5" class="hide">val5</option>
<option value="val6" class="hide">val6</option>
<option value="more" class="more">more</option>
</select>
<style type="text/css">
.hide { display: none; }
</style>
<script type="text/javascript">
jQuery('#mydropdownbox .more').click(function() {
jQuery('#mydropdownbox .hide').attr('class', 'show');
});
</script>
Just put a new class to these elements, which should be hidden per default. Then add a click event to the more link to toggle these classes. It would be easy to make a less button with this technique too.
Make a link in the "more" option. on click of more option should call javascript or jquery and add the data dynamically from the script and toggle the caption of more and less as well as add and remove operation
Related
I need to show/hide options on one select drop down dependant on another child options with checkbox options.
The user when selected the option we need to showcase another child option with checkboxes in that drop down only, Then the user can select multiple checkboxes.
anyone have sample pls forward those samples.
Requirement Image
<head>
<link href="multiple-select.css" rel="stylesheet"/>
</head>
<body>
<select multiple="multiple">
<optgroup label="Group 1">
<option value="1">1</option>
<option value="2">22</option>
</optgroup>
<optgroup label="Group 2">
<option value="11">1</option>
<option value="22">2</option>
</optgroup>
</select>
<script src="multiple-select.js"></script>
<script>
$("select").multipleSelect({
filter: true,
multiple: true
});
</script>
</body>
Your requirements image looks like nested lists of checkboxes. It is much easier to manipulate checkbox inputs in the DOM than it is to modify select options since different browsers treat the addition and removal of options differently.
I would create the dropdown effect manually and just do this with a few divs, lists, and checkboxes.
Using jQuery, I want to hide or disable a select option if a keyword is present in an element higher up the page. Here's some example HTML:
<div>
<div id="divID">The word EXAMPLE is in this sentence.</div>
<select id="optionList" name="optionList">
<option value="">Select Option</option>
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
</div>
So the psuedo-code would go something like this:
IF the word "example" is present in the div with ID "divID"...
THEN make select option "Third Option" hidden (or inactive, or otherwise not an option for the user).
OTHERWISE leave all the select options alone.
I imagine this is pretty basic stuff for anyone who knows what they're doing, which I clearly do not.
Thanks in advance for any help!
Using jquery plus regular expressions, following should be a basic sample:
$(document).ready(function() {
if (/EXAMPLE/.test($('#divID').text()))
$('option[value="3"]').hide();
});
check this js fiddle
https://jsfiddle.net/pe1yvucj/
notice this line
$("option[value='3']").attr('disabled','disabled')
to make it enabled again
$("option[value='3']").removeAttr('disabled')
I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you
You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});
I want to have a <select> element that's default chosen option is "____". In other word's, blank.
When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.
Does that make sense?
Illustrations
Closed:
Opened:
As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.
I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.
You can leverage the hidden attribute in HTML. Try with this example
<select>
<option selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Check this fiddle or the screenshots below.
Before clicking:
After clicking:
To hide the default option, allowing the others to show, there are a few ways to go.
Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...
In the past when I have needed to do this, I have set their disabled attribute, like so...
$('option').prop('disabled', true);
I've then used the hiding where it is supported in browsers using this piece of CSS...
select option[disabled] {
display: none;
}
CSS is your friend, set display:none for the option you want to hide.
<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>
Here's an extra with jQuery that will ensure the first option of any select is invisible:
$('select:first-child').css({display:none;});
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.