There are many solutions to show/hide on select in stackoverflow, and almost all of them help when the number of select and divs are small finite number. I am looking for a solution when the select list is really long, maybe over 40 and there are equivalent number of divs.
Is there a generic way to enable show/hide in this situation.? However, If there are SO posts on this, please point them to me.
Here is my HTML structure...
<div class="form-group">
<label class="col-md-4 control-label" for="changeType">Type of Change</label>
<div class="col-md-4">
<select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
<option value="">--- SELECT ---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
..
...LOT MORE HERE...
.....
<option value="2">three</option>
</select>
</div>
</div>
<div id="1" class="changeTypeDiv">
<hr>
<h1>ONE</h1>
</div>
<div id="2" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>
...
....LOT MORE HERE.....
...
<div id="3" class="changeTypeDiv">
<hr>
<h1>TWO</h1>
</div>
I need to be able to show a DIV on select and hide the rest.
UPDATE to question
If I had more than one select option boxes, do I need to replicate the script or write new function...here is what I tried to do, but it does not work.
DISCLAIMER - It might be evident that I don;t have much insight into coding :)
$(function() {
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#"+$(this).val()).show();
});
$(".addGUIdiv").hide();
$("#addedGUIselect").change(function(){
$(".addGUIdiv").hide();
$)"#"+$(this).val()).show();
});
});
The above does not work..making me guess, I might need a new function..please help.
Thanks
Brijesh.
You can do like this,
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function() {
$(".changeTypeDiv").hide();
$(".changeTypeDiv").eq($(this).val() - 1).show();
});
Here I am taking the index based selection..
Fiddle
Other Possible solution is to give a data-attribute to the div elements. Then show the proper div accordindg to the selection.
You need to create a relation between selected value and div.
as per your comment, Since you have defined the relation. IDof div is same as value of select.
you can use it like
HTML
<select id="changeTypeSelect" name="changeTypeSelect" class="form-control">
<option value="">--- SELECT ---</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<div id="1" class="changeTypeDiv">
<h1>ONE</h1>
</div>
Script
$(".changeTypeDiv").hide();
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#"+$(this).val()).show();
});
DEMO
Hide all of them then show the one with id = value of select event.
$(".changeTypeDiv").hide(); // Hide all
$("#changeTypeSelect").change(function(){
$(".changeTypeDiv").hide();
$("#" + $(this).val()).show();
});
Related
I want class 'myclass' and 'col-3' only to be applied in lg size. In other cases I want only 'col'. How to do that?
I can do that:
<div class="d-none d-lg-block">
<div class="myclass col-3">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
<div class="d-block d-lg-none">
<div class="col">
<select id="country-select">
<option value="">All</option>
<option value="FIN">Finland</option>
<option value="CAN">Canada</option>
</select>
</div>
</div>
But there is a problem that I have two select forms with the same id 'country-select' and my jquery functions don't work correctly. I need the solution with only one select form with id ='country-select'.
I don't want to send data from select forms to server, so I don't need 'name' attribute. I need to use $("#country-select").val() in jquery code, but there is a problem I have two select forms with id ='country-select' in my solution.
Based on your condition for adding or removing class, you can use jquery:
$('.className').addClass('lg-size-class');
$('.className').removeClass('lg-size-class');
Note that id attribute should have a unique value when using it.
I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?
The HTML5 code:
<div data-role="page" id="page-settings" class="page-panel">
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
The -ul -li list is appending from database +item.Gender+ with values : female or male.
Any help will be very appreciated since I have been searching foo three days with no success.
I'm looking for guidance on the following scenario:
Context: A page displays a dynamically generated list with X (changes based on the user) number of items, each formatted as follows:
<div class="dashboard_section_item">
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div> Edit
<label for="add_listname_label">Assign to list</label>
<br/>
<select name="mod_list" class="mod_list">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<input type="hidden" name="prod_uid" class="prod_uid" value=”55872761">
</div>
1st issue: Need to show a modal div on top of a product div when the user clicks on a specific item Edit link.
Current code: It seems I have to specify a unique ID for each modal so it knows which item it is associated with. What I have done(see above) is add the item uid to the id and href tags when the list is generated so it’s mapped accordingly for each item which works fine.
Is there a better way to to this?
If I'm understanding you, something like this should do:
<div id="openModal_55872761" class="modalEdit">
<div>X
<h3>Properties</h3>
</div>
</div>
<a class="someClass" href="#openModal_55872761">Edit</a>
$(document).on('click', 'a.someClass', function() {
$(this).prev('.modalEdit').modal('show');
});
i got a html-dummy (http://www.gisa.de/formular_test/anmeldeformular.html) from another company and now i am trying to create a web-form (http://www.gisa.de/2359.html) based on that dummy.
i am using the same scripts, the basic structure is the same as the dummy, i've compared the sh** out of the code and found nothing. I found one thing with firebug: the site with the non-working select-block won't call the function custom_select from the script.js file - but why???
i hope someone will find a solution, or something that i've just overlooked
i made 2 jsfiddle out of it:
http://fiddle.jshell.net/WbXsv/1/
http://fiddle.jshell.net/95Q8P/1/
The code is not the same. On your page, you're missing two spans in your div select.
Your page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
</div>
Their page:
<div class="select">
<select name="anrede" id="anrede" required="" class="input" style=">
<option value="0" selected="selected">bitte auswählen</option>
<option value="Frau">Frau</option>
<option value="Herr">Herr</option>
</select>
<span class="select-icon"></span>
<span class="select-box">bitte auswählen</span>
</div>
Adding those solved the issue.
You have:
.js select {
opacity: 0;
}
in gisa.css and custom_select function is adding custom html in place of hidden select.
I need to add javascript or jquery code in order to select option from combobox. There are 25 comboboxes and there value read from database. Please find below code fragment
option which is selected by user needs to be selected. It has to be read from database.
<div class="control-group">
<label class="control-label">A. Nails are Clean *</label>
<div class="controls">
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely">Rarely</option>
</select>
</div>
</div>
If you add id attribute to select
<select name="obs_chart_nails_clean" id="obs_chart_nails_clean">
and add jquery to your page, then
$(document).read(function(){
$("#obs_chart_nails_clean").val("Rarely");
});
will select third option.
What do you have server-side? You should be able to produce html with correct option already selected.
In addition to the existing answers, the obvious no-javascript solution must be noted:
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely" selected>Rarely</option>
</select>
Simply add the selected attribute to one of the options.
$(document).ready(function(){
$('#obs_chart_nails_clean').val("Sometimes");
});