I'm trying to use multiple select option in my html page
I'm using materialized css
I used the below code
But it is not working
Can anyone help me with this please
<select multiple size='6' name='list[ ]'>
<option>One</option>
<option>Two</option>
<option selected>Three</option>
<option>Four</option>
<option>Five</option>
<option selected>Six</option>
</select>
Check your syntax.
If you are using materialize css, it should work.
http://materializecss.com/forms.html
Go to "select" and check syntax.
<div class="input-field col s12">
<select multiple>
<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>
<label>Materialize Multiple Select</label>
</div>
Also initialize select by adding
$(document).ready(function() {
$('select').material_select();
});
Related
I have a dropdown which I took from here, https://www.w3schools.com/HOWTO/howto_custom_select.asp and that works okay in html:
<div class="custom-select">
<select>
<option value="0">Select</option>
<option value="0">07.30 - 68.30</option>
<option value="0">07.30 - 98.30</option>
</select>
</div>
But I need to create this in JavaScript with the click event of button:
function addRow(btn) {
document.querySelector("#content").insertAdjacentHTML(
"afterbegin",
`<tr>
<td>${btn.id}</td>
<td>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
</div>
</td>
</tr>`
);
}
But when I do it like this, the dropdown doesnt open anymore. So when I write inside of the javascript, I see the element is like in DOM:
<td>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
</div>
</td>
But in html it is like:
<div>
<div class="custom-select">
<select>
<option value="0">IS</option>
<option value="1">IS 1</option>
<option value="2">IS 2</option>
</select>
<div class="select-selected">IS</div><div class="select-items select-hide"><div>IS 1</div><div>IS 2</div></div></div>
</div>
So I dont know why it doesn add ISIS 1IS 2 automatically.
Do you know why?
Thanks.
You haven't closed the .custom-select <div> tag. Could be the cause of the issue
I want to use swig (it is my templating engine) to insert JavaScript so that the following shows only when the select option 'other' is chosen.
<div class="form-group">
<select class="custom-select">
<option selected>Select Switch Manufacturer</option>
<option value="cisco">Cisco</option>
<option value="netgear">NetGear</option>
<option value="d-link">D-link</option>
<option value="tp-link">TP-link</option>
<option value="hewlett-packard">Hewlett-Packard</option>
<option value="linksys">Linksys</option>
<option value="allied">Allied</option>
<option value="brocade">Brocade</option>
<option value="other">Other</option>
</select>
This is the code I want to only show when the user selects the 'other' option in the code above. How can I do this with Javascript / swig?
<div class="form-group">
<input type="text" class="form-control" id="switch-manufacturer" placeholder="Switch Manufacturer">
</div> <!-- Switch Manufacturer other input only show when above 'other' is selected -->
I made a pen for you.
https://codepen.io/anon/pen/WZENjo
You just need to use the value property of the <select> element.
I used a button to call the function, you can use whatever you want, including adding an onclick to the <select> element, which would look something like this.
<div class="form-group">
<select class="custom-select" id="sel" onclick="foo()">
<option selected>Select Switch Manufacturer</option>
<option value="cisco">Cisco</option>
<option value="netgear">NetGear</option>
<option value="d-link">D-link</option>
<option value="tp-link">TP-link</option>
<option value="hewlett-packard">Hewlett-Packard</option>
<option value="linksys">Linksys</option>
<option value="allied">Allied</option>
<option value="brocade">Brocade</option>
<option value="other">Other</option>
</select>
I have added the following code for making a <select> field in component.
<div class="input-field col s12">
<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>
<label>Materialize Select</label>
</div>
It needs $('select').material_select(); to initialize the field.
when I added it like
componentDidMount(){
$('select').material_select();
}
It shows error like this '$' is not defined no-undef
Help me solve it..
i have many dropdowns in my page.
for dropdowns i am using select2 plugin.
i don't want to use select2 plugin for some of the dropdowns.
is there any way to do so?
i have searched on google and also have gone through their documentation but i didn't get anything related this.
this is my select box code ..
<div class="cust-input">
<select name="management[]">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
</div>
You can implement that using specific class instead of common select tag element.
use:
$(".useSelect2").select2(); //either your desired name of your class or unique ID
instead of
$("select").select2(); // if you used this method, select2 will applied to all dropdowns.
Example:
<select name="management[]" class="useSelect2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
Javascript:
$(".useSelect2").select2();
Other dropdowns:
<select name="management[]" class="dontuseSelect2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
Put a class on the select elements you want to use select2 with, and then use that class to instantiate the plugin. Something like this:
$('.select2').select2();
<div class="cust-input">
<select name="management[]" class="select2">
<option value="0">Select Management</option>
<option value="Chairman">Chairman</option>
<option value="Vice Chairman">Vice Chairman</option>
<option value="Vice Chancellor">Vice Chancellor</option>
<option value="Secretary">Secretary</option>
<option value="Registrar">Registrar</option>
<option value="Dean">Dean</option>
<option value="Owner">Owner</option>
<option value="Other">Other</option>
</select>
<!-- this select will not be styled -->
<select>
<option>Foo</option>
<option>Bar</option>
</select>
Hi i'm using Bootstrap select, and i'm trying to add default option like Choose One
Here's my html code,
<div class="container">
<h3>Bootstrap Select</h3>
<select id="dataCombo" class="selectpicker">
<option data-hidden="true">Choose One</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>
</select>
</div>
Also i'm using jqueryvalidation.org plugin for validation. On form submit above select option is not validating and i'm getting choose one if i print_r all posted data
Did anyone know where i'm going wrong ?
<div class="container">
<h3>Bootstrap Select</h3>
<select id="dataCombo" class="selectpicker">
<option value="" disabled selected>Choose One</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
<option value="six">Six</option>
</select>
</div>
Is this what you have wanted ...