I am using Materialize CSS for my application,using media queries i am making my queries responsive.Select Dropdown we are not able to select any option,in laptop it is working fine but in tablet and mobile view it is not working..Can anyone help?
<div class="input-field col s12 newid m6 l6">
<select>
<option value="" disabled selected>All</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Data</label>
#media screen and (max-width: 320px) {
.newid { width: 96%!important;
margin-top: 8%!important;
margin-left: 0%!important;
}
}
I think you have missed to initialization for select to your
javaScript. You can try this for your Select Option Using Materialize
css.
$(document).ready(function(){
$('select').formSelect();
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="container">
<h5>materialize Select Option. </h5>
<div class="input-field">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
Did you initialize the dropdown menu in your JavaScript? Many of the components that are part of Materialize CSS have to be initialized in order to function on the web page?
The code should be something like this
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
Related
I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185
Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle
I am new to jQuery and javaScript. I am using bootstrap. I have a select menu that is visible and two additional select menus that are hidden. I would like to show the hidden select menus id the user selects "TV" from the visible select menu options. If they select any of the other value options from the visible select menu, I need to display a simple text box where they can explain. After researching online I attempted to do it using some js, but it is not working. Below is my code and here is my jsfiddle link: https://jsfiddle.net/nx6cc1Lc/
HTML:
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6 hidden">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6 hidden">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
Javascript:
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$("#heard_from_station").removeClass('hidden');
$("#heard_from_provider").removeClass('hidden');
}
else
{
$('#heard_from_station').removeClass().addClass('hidden');
$('#heard_from_provider').removeClass().addClass('hidden');
}
});
});
Update your script as given below.
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
{
$("#heard_from_station").parent().removeClass('hidden');
$("#heard_from_provider").parent().removeClass('hidden');
}
else
{
$('#heard_from_station').parent().addClass('hidden');
$('#heard_from_provider').parent().addClass('hidden');
}
});
});
As your html contains "hidden" class on the parent element ".parent()", you need to add / remove class on the parent. Alternatively, you can also give ID to the parent elements and use those ids directly in your script, without using ".parent()".
Just use show() and hide() of jquery for this.Below is the code part for your issue
<script src="jquery.min.js"></script>
<script src="sample.js"></script>
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6" style="display:none">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6" style="display:none">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
<script> $(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$(".selects-5").show();
$(".selects-6").show();
}
else
{
$('.selects-5').hide();
$('.selects-6').hide();
}
});
});</script>
The problem is that the div tags that contain your secondary select menus are hidden, not the select menus themselves -- even so, your script is trying to remove the class from the select menus. So there are a number of ways you can fix this.
One way to fix this is to apply the hidden class to your select menus instead of your div tags.
<div class="selects-5 col-xs-6">
<select id="heard_from_station" class="form-control selectStation hidden" name="heard_from_station">
...
</select>
</div>
<div class="selects-6 col-xs-6">
<select id="heard_from_provider" class="form-control selectProvider hidden" name="heard_from_provider">
...
</select>
</div>
I want to enable the multiple select when I checked the checkbox, but it doesn't work. How to achieve this using jQuery mobile?
<input type="checkbox" id="toggle"/>Toggle Select
<select name="targets" id="targets">
<option value="0">-----Select an option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
$(document).ready(function() {
$("#toggle").on('click', function() {
if ($(this).is(':checked') == true){
$("#targets").attr('multiple', true).attr("data-native-menu","false");
} else {
$("#targets").attr('multiple',false);
}
});
});
Try this
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
</style>
</head>
<body>
<input type="checkbox" id="toggle"> Toggle Select
<select name="targets" id="targets">
<option value="0">-----Select a option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
<script>
$(document).ready(function(){
$("#toggle").on('click',function(){
if($(this).is(':checked')==true){
$("#targets").attr('multiple',true).attr("data-native-menu","false");
}else{
$("#targets").attr('multiple',false);
}
});
});
</script>
</body>
</html>
You are using attr() function which is good for simple HTML attributes.
However, in the newer versions of jQuery (after 1.6), for element properties like readonly, checked, multiple you need to use jQuery prop() function.
Try changing the function:
$(document).ready(function() {
$("#toggle").on('click', function() {
if ($(this).is(':checked') == true){
$("#targets").prop('multiple', true).attr("data-native-menu","false");
} else {
$("#targets").prop('multiple',false);
}
});
});
You can read more about jQuery.prop() here.
Here is my JS Fiddle Demo which works.
Start with data-native-menu="false" in the markup:
<label><input type="checkbox" id="toggle" />Toggle Select</label>
<select name="targets" id="targets" data-native-menu="false">
<option value="0">-----Select an option ----</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
Then on the checkbox change event, destroy the selectmenu widget, update the multiple prop, and reinitialize it:
$("#toggle").on('change', function () {
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu();
});
DEMO
If you want the native menu for single select, change the code to:
$("#targets").selectmenu("destroy").prop('multiple', $(this).is(':checked')).selectmenu({ nativeMenu: !$(this).is(':checked')});
DEMO
I am trying to make a page when someone clicks on a option in the select form, another select form appears then another without having to refresh the page. I know you use AJAX for not refreshing but my code is somehow not working when tried.
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
</div>
<div id="result">
</div>
javascript(AJAX)
$(document).ready(function() {
$('#example').on('click', 'button.switch', function() {
$.ajax('AjaxLoadedContent.html')
.done(function(response){
$('#result').html(response);
});
});
});
Content thats suppose to load(Another select form)
<select id="foo">
<option value="">Pick a site</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>
</select>
But whats wrong??
As #Goose said in the comments, instead of using an Ajax call you could hide the select boxes and show them based on the value of the shown select option, as shown below:
HTML
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="demographic">Demographic</option>
<option value="crime">Crime</option>
<option value="school">School</option>
</select>
<select id="demographic" class="toggle">
<option value="">Demographic</option>
<option value="d1">d1</option>
<option value="d2">d2</option>
<option value="d3">d3</option>
</select>
<select id="crime" class="toggle">
<option value="">Crime</option>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
</select>
<select id="school" class="toggle">
<option value="">School</option>
<option value="s1">s1</option>
<option value="s2">s2</option>
<option value="s3">s3</option>
</select>
</div>
<div id="result"></div>
CSS
.toggle {
display:none;
}
JS
$('#foo').on('change', function(){
var val = $(this).val();
$('.toggle').hide();
$('#'+val).show();
});
Fiddle
If your content is fairly static, I'd use the following code that doesn't invoke additional http calls:
HTML:
<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
<div id="result">
<select id="foo">
<option value="">Pick a site</option>
<option value="">Demographic</option>
<option value="">Crime</option>
<option value="">School</option>
</select>
</div>
JS:
$(function() {
$("#result").hide();
$("#foo").click(function() {
$("#result").show();
});
});
Let me know if it helps. Cheers!
I have a ddl control. I want to change the visibility of some items on the client-side (JS).
I only found methods to insert\remove items.
But I only want to hide\show them.
Does someone has an idea how to do so ?
You need to access the item and set its [edit]style.display[/edit] to "none":
<html>
<head>
<script type="text/javascript">
function hideItem() {
document.getElementById("a3").style.display = "none";
}
</script>
<body onload="hideItem()">
<form>
<select name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
</form>
</body>
</html>
I think you are looking for the
<span style="display:none">
option. You can toggle this style using Javascript.
In Firefox, you can use the display style:
<select id="s" name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
and:
document.getElementById("a3").style.display = "none";
However, this will not work on Internet Explorer. For IE, you can only remove the element entirely (possibly re-adding it later):
document.getElementById("s").options[2] = null;
You could move the element to a separate, hidden <select /> if you want to store it somewhere for adding back later.
The only thing you can do is removing the option.
You can do this simply in jQuery by:
$('#yourOptionId').remove();
Or you can disable the option by:
$('#yourOptionId').attr('disabled', 'disabled');
And enable by:
$('#yourOptionId').removeAttr("disabled");
But no there is no way to simply hide an option.
By "ddl control" I'm assuming the structure will be like:
<select id="selectId">
<option id="optionId"></option>
</select>