Develop Reference

Dropdown doesnt work when I moved it to JavaScript

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

HTML select multiple option failed

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();
});

How to stop select box to use select2 plugin

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>

jquery .html() not getting latest selected value

jquery .html() not getting latest selected value, code here
<div id="testDiv">
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
</div>
and script
$(document).ready(function(){
$('#mySel').val('3');
var divContent = $('#testDiv').html();
alert(divContent);
});
getting an output like this
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
'selected' not getting changed, i need output like this
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option selected value="3">opt 3</option>
<option value="4">opt 4</option>
</select>

$(document).ready(function(){
$('#mySel').val('4');
$("#mySel").find('option').removeAttr("selected");
$("#mySel option[value='4']").attr("selected","selected");
var divContent = $('#testDiv').html();
alert(divContent);
});
Output:
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option value="3">opt 3</option>
<option selected="selected" value="4">opt 4</option>
</select>

For your desired output you will need to add a script to move the selected attribute to the correct <option> when the user changes the value. By default the select list will not modify your markup based on the user's actions.

jquery- Adding <option> tag inside <select>

I have a drop down list like
<select name="select">
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
I want to add one extra <option> tag at the top like
<select name="select">
<option value="value1" disabled selected>Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
How can i do it with jquery.

$(
'<option></option>',
{value:"newvalue",text:"new option"}
).attr({
disabled:"disabled",
selected:"selected"
}).prependTo("select[name='select']")