Is it possible to hide a option in select with div, and then use style.display = "none"
Html code I have used:
<div class="test">
<div class="optioncheck" id="text place">
<select id="status" onChange="myFunction()">
<option value="1">Texts</option>
<div class="options" id="text"><option value="2">Text</option></div>
<div class="options" id="text1"><option value="3">Text1</option></div>
</select>
</div>
<div class="optioncheck" id="map" style="display:none;">
Text
<div class="optioncheck" id="map1" style="display:none;">
Text
</div>
</div>
</div>
Javascript I try to use to hide the options if variable is false
var readtext = false;
if (readtext == true) {
document.getElementById('text').style.display = "block";
} else {
document.getElementById('text').style.display = "none";
}
You can't directly. Instead, you have to use (or write) javascript library which will demonstrate divs for select options. Just like Select2 jQuery library does.
You can't use display:none for hiding options in select, if you want to hide option you can use something like
$( "#status option[value=1]" ).wrap( "<span>" );
and to again show the particular option use
if ( $( "#status option[value=2]" ).parent().is( "span" ) ){
$( "#status option[value=2]" ).unwrap();
}
This should do the work for you.
Remove divs, use just options.
Here your code without divs.
http://codepen.io/anon/pen/ryOeWo
<div class="test">
<div class="optioncheck" id="text place">
<select id="status" onChange="myFunction()">
<option value="1">Texts </option>
<option id="text" value="2">Text</option>
<option value="3">Text1</option>
</select>
</div>
<div class="optioncheck" id="map" style="display:none;">
Text
<div class="optioncheck" id="map1" style="display:none;">
Text
</div>
</div>
If you just wish to hide some options other than the first option.You can do that via simple javascript.
Refer to this fiddle:
https://jsfiddle.net/ysd8w8sk/
Let's say we have following html:
<select id="fruits_dropdown">
<option value='1' > Apple </option>
<option value ='2'> Banana </option>
<option value ='3'> Orange </option>
<option value ='4'> Cherry </option>
</select>
Then we can hide option 2 and 3 like this :
document.querySelector('#fruits_dropdown option[ value="2"]').style.display='None';
document.querySelector('#fruits_dropdown option[ value="3"]').style.display='None';
Related
I have a categories dropdown and multiple divs with class names, i want when the user selects and option from the dropdown to filter the divs according to the chosen option, like for example i have a category called makeup when the user selects it i want to only show the divs with the class makeup, here is what i have tried:
$('#categories').change(function() {
var val = $(this).val();
if (val == "makeup") {
$('.makeup').fadeIn();
} else {
$(".makeup").not('.' + value).fadeOut();
$('.makeup').filter('.' + value).fadeIn();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="makeup">
Div 1
</div>
<div class="makeup">
Div 2
</div>
<div class="makeup">
Div 3
</div>
<div class="other">
Div 4
</div>
Put a common class "category" on all the divs.
Bind the change handler to the select
When it changes, fadeOut all the options, and fadeIn the ones that match the value as a class
$('#categories').on('change', function(e) {
$('.category')
.fadeOut()
.filter('.'+ e.target.value)
.fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="category makeup">
Div 1
</div>
<div class="category makeup">
Div 2
</div>
<div class="category makeup">
Div 3
</div>
<div class="category other">
Div 4
</div>
This code works as requested, I've just added the class .category-option to the elements you are fading in and out.
Demo
$('#categories').change(function() {
// Get value of selected option
var val = $(this).children("option:selected").val();
// Fadeout all that are not linked
$(".category-option").fadeOut();
// Fade in appropriate options
$(".category-option." + val).fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="category-option makeup">
Div 1
</div>
<div class="category-option makeup">
Div 2
</div>
<div class="category-option makeup">
Div 3
</div>
<div class="category-option other">
Div 4
</div>
Here is my HTML;
<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
<div class="question">
<h2 class="question__title">Country</h2>
<div class="form-field form-field--dropdown">
<select required="1" name="country" data-parsley-group="group-0">
<option selected="selected" value="">Please select...</option>
<option value="great-britain">Great Britain</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="question"> // line 13
<h2 class="question__title">Postcode</h2>
<div class="form-field">
<input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
</div>
</div>
</div>
How can I hide the div starting on "line 13" (see comment in code) unless the Country question above's input is Great Britain?
It's dynamic so I can't assign the div directly to give it a name. All I have to go on is the input which has name of postcode.
If I could access that div, then I think it would be something like;
$('#country').on('change.postcode', function() {
$("#").toggle($(this).val() == 'great-britain');
}).trigger('change.postcode');
There is a function in JQuery called parent(). You can use get the input node via
$("input[name='postcode']")
and then access the parent of it's parent to hide it like that:
$("input[name='postcode']").parent().parent().hide();
Learn more about parent() here.
EDIT (thanks to andlrc):
You could also use closest() instead of the double parent():
$("input[name='postcode']").closest("div.question").hide();
see here.
A combination of parent and next should do the trick:
$(function(){
$('select[name="country"]').change(function(){
var country = $(this).val();
if(country == 'great-britain'){
$(this).parent().parent().next('.question').show();
}
else{
$(this).parent().parent().next('.question').hide();
}
});
});
In order to hide the dinamically generated html, you can do something like this:
$('.question').each(function(i,item){
if((i+1) % 2 ==0){
$(item).hide();
}
});
Updated fiddle: https://jsfiddle.net/robertrozas/pen942nf/1/
You This must work:
<style>
.hide{display:none;}
</style>
<div class="pagination__page" data-pagination-page="" data-pagination-group="group-0" style="display: block;">
<div class="question">
<h2 class="question__title">Country</h2>
<div class="form-field form-field--dropdown">
<select required="1" name="country" data-parsley-group="group-0">
<option selected="selected" value="">Please select...</option>
<option value="great-britain">Great Britain</option>
<option value="zimbabwe">Zimbabwe</option>
</select>
</div>
</div>
<div class="question sh"> // line 13
<h2 class="question__title">Postcode</h2>
<div class="form-field">
<input data-parsley-postcode="1" name="postcode" type="text" data-parsley-group="group-0">
</div>
</div>
</div>
<script>
$("#country").change(function(){
$(this).find("option:selected").each(function(){
if($(this).attr("value")=="great-britain"){
$('.sh').show();
}
else{
$('.sh').hide();
});
});
</script>
I want to change the inner text of a anchor tag with the selected drop down option text
Here is my code of dropdown list whatever option is selected in this drop down list i want to update that option's text in another anchor tag
<span style="white-space: nowrap;" class="" id="shopperlanguage_fs">
<select class="input" id="shopperlanguage" name="shopperlanguage">
<option value="ja_JP" class="japImg">japanees</option>
<option selected="" value="en" class="engImg">English (International)</option>/* whatever option is selected like this i want to get this text */
</select>
</span>
I want to update anchor tag class="dropdown-open" innerhtml with above mentioned dropdown
list selected text
<div class="top-lang clearfix">
<div class="cat-select">
<a href="#" data-dropdown="#dropdown-2" class="dropdown-open"><img src="/site/images
/lang_05.jpg"> English</a> /* this is the anchor tag which innerhtml i want to change with selected dropdown option text */
</div>
</div>
Suppose if in dropdown list selected option having text japanees then i want to change the anchor tag innerhtml text english to japanees.
this is my code which i tried but its not working
<script type="text/javascript">
var e = document.getElementById("shopperlanguage");
var strUsertext = e.options[e.selectedIndex].text;
var langValue =$(".dropdown-open").text()
langValue.innerHTML= strUsertext;
</script>
Just try this.. :)
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"> </script>
<span style="white-space: nowrap;" class="" id="shopperlanguage_fs">
<select class="input" id="shopperlanguage" name="shopperlanguage">
<option value="ja_JP" class="japImg">japanees</option>
<option selected="" value="en" class="engImg">English (International)</option>/* whatever option is selected like this i want to get this text */
</select>
</span>
<div class="top-lang clearfix">
<div class="cat-select">
<a href="#" data-dropdown="#dropdown-2" class="dropdown-open">
<img src="/site/images/lang_05.jpg"> English</a> /* this is the anchor tag which innerhtml i want to change with selected dropdown option text */
</div>
</div>
<script type="text/javascript">
$('#shopperlanguage').change(function(){
$('.dropdown-open').text($(this).find('option:selected').text());
});
</script>
try in javaScript
var e = document.getElementById("shopperlanguage");
var strUsertext = e.options[e.selectedIndex].text;
document.getElementsByClassName("dropdown-open")[0].childNodes[1].nodeValue = strUsertext;
DEMO
use On change Jquery with javascript
$('#shopperlanguage').on('change', function () {
$(".dropdown-open")[0].childNodes[1].nodeValue = this.options[this.selectedIndex].text;
}).change();
DEMO
I added <span class="text"></span> to your markup so it would be easier to select the target area:
$('#shopperlanguage').on('change', function() {
$('.cat-select a span.text').text( $('option:selected',this).text() );
})
.change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span style="white-space: nowrap;" class="" id="shopperlanguage_fs">
<select class="input" id="shopperlanguage" name="shopperlanguage">
<option value="ja_JP" class="japImg">japanees</option>
<option selected="" value="en" class="engImg">English (International)</option>
</select>
</span>
<div class="top-lang clearfix">
<div class="cat-select">
<a href="#" data-dropdown="#dropdown-2" class="dropdown-open"><img src="/site/images
/lang_05.jpg"> <span class="text">English</span></a>
</div>
</div>
<select name="abc" id="abc" onchange="chng()">
<option value=""></option>
<option value="English">English</option>
<option value="Japanese">Japanese</option>
</select>
English
<script>
function chng()
{
var s= document.getElementById('abc').value;
document.getElementById('atag').innerHTML = s;
}
</script>
This is working Demo. Please try it.
i have created dynamic drop down
loading second drop down using first selected value
now what i need is i need to display the following css(tic icon) next to first drop down
code
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
the CSS is added in JSfiddleand full Jsfiddle
i need like this when second drop down is loaded i need output like this
You can make it like this http://jsfiddle.net/4yL0871f/2/
The CODE
$(function () {
$("#text-one").change(function () {
$("#checkmark").css({display: 'inline-block'});
$("#text-two").show();
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
});
HTML
<div id="page-wrap">
<h1>Pulls from text files</h1>
<div class="select-wrap">
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
</div>
<select id="text-two" style="display :none">
<option>Please choose from above</option>
</select>
</div>
Updated: I would like to control the visibility of the bottom divs based on the value of the top SELECT..
i.e
selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible
etc..
Appreciate it.. Sorry I didn't do a better job of explaining my question initially -
<select>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>
Try this
$('#pets').change(function() {
$('#somepets div').hide();
$('#somepets div.' + $(this).val()).show();
});
But for this you should change your class names to match the values of the options. Also you need to give your "select" element an ID.
EDIT: To clarify a bit, this selector is going to try and find the select element by its ID "pets" so you need to add id="pets". The name and ID can be the same value.
EDIT: Since you're having some trouble with the HTML here is what it would need to look like to work with my method.
<select id="pets">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="somepets">
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString+=selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>
<select id="pets" onchange="selectionChanged()">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<div id=somepets>
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>