I have labels and select lists associated with 2 different classes. Based on the radio button checked I would like to hide the elements associated to one class and show the elements associated to the other class.
HTML
Radio Button
<p>Your Preferred Input</p>
<label for="qual_quant">Qualitatively</label>
<input type=radio id="rb_qual" name="qual_quant" value="qual">
<label for="qual_quant">Quantitatively</label>
<input type=radio id="rb_quant" name="qual_quant" value="quant" checked>
This is an example of the code to be shown when #rb_qual = "qual"
<label for="fs_qual_tech" class="fs_qual">Technical - Qual</label>
<select id="fs_qual_tech" name="fs_qual_tech" class="fs_qual">
<option value="" disabled selected hidden>Choose Trait...</option>
<option value="2.5">Very Poor</option>
<option value="8">Poor</option>
<option value="13">Good</option>
<option value="18">Very Good</option>
</select>
Below is an example of code to be hidden when #rb_qual="qual"
<div class="fs_quant_div">
<label for="fs_quant_tech" class="fs_quant">Technical - Quant</label>
<select id="fs_quant_tech" name="fs_quant_tech" class="fs_quant">
<option value="" disabled selected hidden>Assign Points...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
CSS
condition which hides all .fs_qual elements
.fs_qual {
display: none;
}
Trigger which shows .fs_qual
#rb_qual:checked ~ .fs_qual {
display: block;
}
Everything works -- except that trigger. If someone can help with this trigger I can expand on it for the other class and radio button value.
Screenshot of how it looks / functions(not)
I was able to make the trigger work for both cases.
You have added the quants inside the div.
So, the selector #rb_quant:checked ~ .fs_quant would not work as expected.
Please check this fiddle and let me know.
https://jsfiddle.net/xqekr762/
Related
I have a dropdown and I want to detect all the events, even if they are the same, when custom period is selected a modal is displayed, but I need that the user be able to use this modal all the times he want, even if is selected, here is the code:
<div class="form-group">
<select width="'100%'" ng-model="selection.date.mode"
class="form-control input-sm" ng-change="setDateMode()">
<option value="d" ng-show="visible.date.d" >Day</option>
<option value="w" ng-show="visible.date.d" >Week</option>
<option value="m" ng-show="visible.date.d" >Month</option>
<option value="y" ng-show="visible.date.d">Year to Date</option>
<option value="c" ng-show="visible.date.d" >Custom</option>
<option value="l" ng-show="visible.date.d" >Last 30 days</option>
</select>
AngularJS function:
function setDateMode() {
$scope.selection.date.mode === "c" ? clickCustomInput() : dateSelected();
}
Basically you should think twice whether you really need this. You can only achieve it by adding a click-directive to each option:
<option value="d" ng-show="visible.date.d" ng-click="setDateMode()">Day</option>
This will cause double calls of setDateMode() with each selection except the selected value stays the same. But you can‘t remove ng-change() from the select-element because when ng-click() fires the dropdown list doesn‘t know the currently selected value yet...
Here are two different datalist one with patient filenumber other with state
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>pc123</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
When you open drop down menu for both you will notice input for patient show value & innerHTML both and inverted(on clicking it enters value inside input field). And in State input it just simply show state
What's the reason of these different behaviors?
I want to input to show just innerHTML of option like state input and have different data in value & innerHTML
While I cannot answer your exact question, I.E. "What is the reason of this", I can tell you why it happens.
As a result of the intended functionality of the program running the code (whichever web browser you're running) the .innerHTML attribute is shown to the right of the option element only if the .innerHTML value and the .value value differ.
Here is a fiddle showing this in action, I've changed the first option to have the same .innerHTML value and .value value as an example: https://jsfiddle.net/87h3bcwd/
Further Reading on the Datalist Element that I found useful in answering this question: http://www.w3.org/TR/html5/forms.html#the-datalist-element
Code:
<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number">
<datalist id="patient-list">
<option value='49'>49</option>
<option value='48'>pc162</option>
<option value='47'>pc183</option>
<option value='45'>pc193</option>
</datalist>
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state">
<datalist id="state-list">
<option value='delhi'>delhi</option>
<option value='mumbai'>mumbai</option>
<option value='Haryana'>Haryana</option>
<option value='Gurgaon'>Gurgaon</option>
</datalist>
Using <datalist> doesn't work like <select>. It always displays the value attribute and doesn't let you change it by default.
This answer shows how to display different text if you need to - it consists of using a data- attribute and processing it with JavaScript:
Show datalist labels but submit the actual value
I'd this html code:
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />Saved</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</li>
<li>
<label>
<input type="radio" name="payment[ebzc_option]" value="saved" />New</label>
<div class="input-box">
<select name="payment[ebzc_method_id]">
<option value="">Please select...</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</div>
</li>
and I need to toggle the <div class="input-box"> adjacent to the checked radio (name="payment[ebzc_option]") button using prototype.
Can anybody help me to do this? I'd not worked on prototype before.
any hint on selecting radio button by name attribute (name="payment[ebzc_option]") in prototype.js
Set up a function that you can call both at page load and whenever a radio button is clicked.
function setSubmenuVisibility(){
$$('input[type="radio"]').each(function(elm){
if(elm.up('label') && elm.up('label').next('div')){
var sub = elm.up('label').next('div');
if(elm.checked){
sub.show();
}else{
sub.hide();
}
}
});
}
setSubmenuVisibility();
document.on('click', 'input[type="radio"]', function(evt, elm){
setSubmenuVisibility();
});
You can toggle the visibility using Element.toggle
Many ways to do this
you could use the DOM traversal methods if the HTML will be the same
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
this.nextSiblings().first().toggle();
});
In this instance we use $$() to select all of the radio buttons with the name attribute payment[ebzc_option] and use the invoke() method to call observe() on all of them. In the closure of the event handler this is the element the event happened on, then you collect all of the next siblings using nextSiblings(), pick the first() one out of the array and run toggle() on it.
This is not ideal because it depends on the HTML structure to stay the same.
Lets try adding an id to the divs you want to toggle (ids need to be unique like you discovered), and lets add that id to the radio button in a data attribute. Data attributes can be anything you want just need to start with data-
<div class="input-box" id="input-box_saved">
<input type="radio" name="payment[ebzc_option]" value="saved" data-toggle="input-box_saved" />
Now our observer statement changes to
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$(this.readAttribute('data-toggle')).toggle();
});
you could even extend the observer closure to make sure only one of the divs is open at a time
$$('input[name="payment[ebzc_option]"]').invoke('observe','click',function(){
$$('.input-box').invoke('hide');
$(this.readAttribute('data-toggle')).show();
});
EDIT I missed that the <input> and <div> were not siblings as the closing </label> was going off the right side of the box. In this instance the DOM traversal would be a bit more up() and down() to get it to work.
Is there a CSS selector that allows me to select an element based on an HTML select option value?
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>Display only if an option with value 1 is selected</p>
I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.
Is there a way to do this?
Edit:
The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P> element based on the value selected in the <select>.
How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:
<select name="number-of-stuffs">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="stuff-1">
<input type="text" name="stuff-1-detail">
<input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none">
<input type="text" name="stuff-2-detail">
<input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
<input type="text" name="stuff-3-detail">
<input type="text" name="stuff-4-detail2">
</div>
I would like to display div.stuff-1 and div.stuff-2 when number-of-stuffs=2 and display div.stuff-1 div.stuff-2 and div.stuff-3 when number of stuffs=2.
Something like this fiddle
Its called an attribute selector
option[value="1"] {
background-color:yellow;
}
Example http://jsfiddle.net/JchE5/
You can use
select option[value="1"]
but browser support won't be fantastic.
This probably requires a parent selector which has not been specified for CSS2 or CSS3.
CSS selector for "foo that contains bar"?
Is there a CSS parent selector?
A subject selector has been defined in the CSS4 working draft as of May 2013 but no browser vendor has implemented it yet.
Whether the method in question works (in theory) using the subject selector remains to be seen.
How about the alternative below?
You don't get a select box, but perhaps this is close enough.
#option-1,
#option-2,
#option-3 {
display: none;
}
#nos-1:checked ~ #option-1,
#nos-2:checked ~ #option-2,
#nos-3:checked ~ #option-3 {
display: block;
}
<input id="nos-1" name="number-of-stuffs" type="radio" value="1" checked="checked" /><label for="nos-1">1</label>
<input id="nos-2" name="number-of-stuffs" type="radio" value="2" /><label for="nos-2">2</label>
<input id="nos-3" name="number-of-stuffs" type="radio" value="3" /><label for="nos-3">3</label>
<div id="option-1">
<input type="text" name="stuff-1-detail" value="1-1" />
<input type="text" name="stuff-1-detail2" value="1-2" />
</div>
<div id="option-2">
<input type="text" name="stuff-2-detail" value="2-1" />
<input type="text" name="stuff-2-detail2" value="2-2" />
</div>
<div id="option-3">
<input type="text" name="stuff-3-detail" value="3-1" />
<input type="text" name="stuff-4-detail2" value="3-2" />
</div>
i believe that in "live" or realtime, it is possible only with javascript or jQuery. Wrap the potentially hidden fields in divs with display: none onLoad and have JS or jQuery change state to display: block or however you like.
//Show Hide based on selection form Returns
$(document).ready(function(){
//If Mobile is selected
$("#type").change(function(){
if($(this).val() == 'Movil'){
$("#imeiHide").slideDown("fast"); // Slide down fast
} else{
$("#imeiHide").slideUp("fast"); //Slide Up Fast
}
});
//If repairing is selected
$("#type").change(function(){
if($(this).val() == 'repairing'){
$("#problemHide").slideDown("fast"); // Slide down fast
$("#imeiHide").slideDown("fast"); // Slide down fast
}else{
$("#problemHide").slideUp("fast"); //Slide Up Fast
}
});
});
// type is id of <select>
// Movil is option 1
// Repairing is option 2
//problemHide is div hiding field where we write problem
//imeiHide is div hiding field where we write IMEI
i am using in one of my apps...
Possible with PHP too, but with PHP, you will have to send the change request or you can write a code in php to have certain classes to be loaded based on already selected values, for example
<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I found a solution based on this answer
satisfies op's request most. Not purely in CSS but definitely least amount of JavaScript is involved.
select[data-chosen='1']~.stuff-1{
display: block !important;
}
select:not([data-chosen='1'])~.stuff-1{
display: none;
}
select[data-chosen='2']~.stuff-2{
display: block !important;
}
select[data-chosen='3']~.stuff-3{
display: block !important;
}
<select name="number-of-stuffs" data-chosen = "1" onchange = "this.dataset.chosen = this.value;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="stuff-1">
<span> I am stuff-1!</span>
<input type="text" name="stuff-1-detail">
<input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none">
<span> I am stuff-2!</span>
<input type="text" name="stuff-2-detail">
<input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
<span> I am stuff-3!</span>
<input type="text" name="stuff-3-detail">
<input type="text" name="stuff-4-detail2">
</div>
You don't even need to write any separated js, despite embedding "this.dataset.chosen = this.value;" in onchange seems to be a bit hacky.
So I have a select element with multiple option elements. All option elements except one have:
color: black;
One option has:
color: red;
For example:
<select name="foo">
<option value="1" class="textBlack">1</option>
<option value="2" class="textBlack">2</option>
<option value="3" class="textRed">3</option>
<option value="4" class="textBlack">4</option>
</select>
The problem is I would want the option with red text to stay red after being selected. So when HTML in DOM looks like this (i.e. I click on the select element and choose the red option):
<select name="foo">
<option value="1" class="textBlack">1</option>
<option value="2" class="textBlack">2</option>
<option value="3" class="textRed" selected="selected">3</option>
<option value="4" class="textBlack">4</option>
</select>
I would like the text in the select element to be red as well. However the text is black.
with pure css I don't think it's possible. You can use select {color:red} but this will color red all the option. To achieve what you need probably will need javascript, an example of jQuery code is below:
$("select").change(function(){
var current = $("select option:selected").attr("value");
if (current == 3) {$("select").css('color','red');} else {$("select").css('color','black');}
});
$("select").click(function() {
$("select option").css('color','black');
});
Demo: http://jsfiddle.net/xrPKN/2/
You'll have to change the color of the select via JavaScript then. Something like
$("select").change(function(){
$(this).css("color", $(this).children("option:selected").css("color"));
});
.textRed{color:red}
Very simple, unless im missing something?