Dropdown doesnt work when I moved it to JavaScript - 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

Related

JavaScript to change class on element for cascading drop-down lists

I have a website that uses PHP to look at various tables on a SQL Server, these tables provide the drop-down lists with their data. I wish to create a cascading drop-down list, below is the code that provides the HTML.
div class="col-md-4" class="form-control" id="Type">
<select>
<?php foreach ($conn->query($sqlType) as $row){echo '<option
class="'.$row['ShortCode'].'">'.$row['Type'].'</option>';} ?>
</select>
</div>
Below is the result
<option class=""></option>
<option class="Deal">Deal</option>
<option class="Price">Price</option>
<option class="Promo">Promo</option>
<option class="Promo">Promo</option>
<option class="LTD">Long term Deal</option>
On another drop-down list we wish to hide the options not selected in the first drop-down list.
<div class="col-md-4" class="form-control" id="Category">
<select">
<?php foreach ($conn->query($sqlCategory) as $row){echo '<option
class="'.$row['Type'].' hide">'.$row['Category'].'</option>';} ?>
</select>
</div>
<select">
The results are below.
<option class=" hide"></option>
<option class="Deal hide">Exceptional / Clearance</option>
<option class="Promo hide">Invoice</option>
<option class="Promo hide">Retro</option>
<option class="Listing hide">New</option>
<option class="Listing hide">Delisting</option>
<option class="Price hide">Increase</option>
<option class="Price hide">Decrease</option>
<option class="LTD hide">Off Invoice (ZXPN Only)</option>
<option class="LTD hide">Retro (No ZR88)</option>
The idea is that if for example "Listing" is selected in the first drop-down a JavaScript or JQuery script will remove the "hide" class from;
<option class="Listing hide">
You do not have a "Listing" in the first drop down, but why not use value in the first dropdown, then no need to remove classes
$(function() {
$("#Type").on("change","select", function() {
var $cat = $("#Category>select");
$cat.find("option:gt(0)").hide(); // keep first option
$("." + this.value, $cat).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4" class="form-control" id="Type">
<select>
<option value=""></option>
<option value="Deal">Deal</option>
<option value="Price">Price</option>
<option value="Promo">Promo</option>
<option value="Listing">Listing</option>
<option value="LTD">Long term Deal</option>
</select>
</div>
<div class="col-md-4" class="form-control" id="Category">
<select>
<option class=""></option>
<option class="Deal">Exceptional / Clearance</option>
<option class="Promo">Invoice</option>
<option class="Promo">Retro</option>
<option class="Listing">New</option>
<option class="Listing">Delisting</option>
<option class="Price">Increase</option>
<option class="Price">Decrease</option>
<option class="LTD">Off Invoice (ZXPN Only)</option>
<option class="LTD">Retro (No ZR88)</option>
</select>
</div>

How to make <select> of materialize-css work with reactJS?

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..

Putting input results in specific parts of a table using jquery

<div id="booking-details">
<label for="select-1">Select your Programme:</label> <br />
<div class="styled-select">
<select id="select-1">
<option value="test_1">Test 1</option>
<option value="test_2">Test 2</option>
<option value="test_3">Test 3</option>
<option value="test_4">Test 4</option>
<option value="test_5">Test 5</option>
</select>
</div>
<br />
<label for="select-2">Select your time slot:</label> <br />
<div class="styled-select">
<select id="select-2">
<option value="one">01:00</option>
<option value="two">02:00</option>
<option value="three">03:00</option>
<option value="four">04:00</option>
<option value="five">05:00</option>
<option value="six">06:00</option>
<option value="seven">07:00</option>
<option value="eight">08:00</option>
<option value="nine">09:00</option>
<option value="ten">10:00</option>
<option value="eleven">11:00</option>
<option value="twevle">12:00</option>
<option value="one-pm">13:00</option>
<option value="two-pm">14:00</option>
<option value="three-pm">15:00</option>
<option value="four-pm">16:00</option>
<option value="five-pm">17:00</option>
<option value="six-pm">18:00</option>
<option value="seven-pm">19:00</option>
<option value="eight-pm">20:00</option>
<option value="nine-pm">21:00</option>
<option value="ten-pm">22:00</option>
<option value="eleven-pm">23:00</option>
<option value="midnight">00:00</option>
</select>
</div>
</div>
I'm trying to complete a tv guide table and finding it difficult to put specific select results into specific parts of a table, is there any methods I could use to do this?
The table has 10 rows, each a different tv channel and then 24 columns to the left in reference to each hour of the day.
Reading your question, I'd consider putting two classes on each table cell (td). One class would be the channel, and other would be the time.
Then in jQuery, for each data item, you'd find the cell that matches both classes and append to that cell (td).
For example, if you had a table:
<table>
<tr>
<td class="test_4 ten-pm"></td>
<td class="test_4 eleven-pm"></td>
<td class="test_4 midnight"></td>
</tr>
<tr>
<td class="test_5 ten-pm"></td>
<td class="test_5 eleven-pm"></td>
<td class="test_5 midnight"></td>
</tr>
<table>
Then you could add to it such as:
$('td.test_5.midnight').append( "x" );
See Also:
How can I select an element with multiple classes in jQuery?

Show and hide a div on corresponding dropdown value change

I have a DIV with two dropdown(maindd and subdd) and an ADD button in a seperate DIV. If i click ADD button i am generating another div with similar two dropdown which have same value(like maindd and subdd). If i click ADD button again, Again i am generating a div with two dropdown(Name maindd and subdd). Like that how many times i want, i can click the ADD button and add a DIV with two dropdowns.
The question is, if i change the first DIV first dropdown (maindd)value, i need to show the corresponding dropdown(subdd) which is present in the same div not on the other DIV. Similarly for second DIV dropdown change, i need to show its corresponding second DIV second dropdown.
Note: By default all the second dropdown(subdd) is set to "display:none;" through CSS. I am using JQUERY.
Code:
<div id="container">
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
</div>
<div><input type="button>Add Row</button>
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
</div>
<div><input type="button>Add Row</button>
</div>
Tried This:
$(document).ready(function(){
$(".recordnumber").on("change",function(){
if ( this.value == 'other')
{
$(this).siblings(".othertype").show();
}
else
{
if(this.value != 'other')
{
$(this).siblings(".othertype").hide();
}
}
});
});
Is this the right approach to do it?
Try this code may be useful that you want
$(".recordnumber").on("change",function(){
$(".othertype").hide();
$(this).siblings(".othertype").show();
});
DEMO
check below code it may help for you
$(".recordnumber").on("change",function(){
$(this).siblings(".othertype").css("display", "block");
});
.othertype{
display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
<input type="button" value="Add Row" />
</div>
<div class="records">
<select class="recordnumber" name="maindd">
<option value="first">first</option>
<option value="second">second</option>
<option value="other">other</option>
</select>
<select class="othertype" name="subdd">
<option value="one">One</option>
</select>
<input type="button" value="Add Row" />
</div>
</div>

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

Categories

Resources