Develop Reference

Hide fields based on selection from dropdown

I have dropdown menu for categories where you can select a type of property like (colocation, sell, buy)
and based on that selection fields will show to add extra information's
But every selection need specific type of fields
For I'm using jQuery but I don't know how to show fields based on every selection
Html code for menu :
<select name="prop_category" id="prop_category_submit" class="select-submit2">
<option value="-1">Aucun</option>
<option class="level-0" value="149">Colocation</option>
<option class="level-1" value="150">colocation études</option>
<option class="level-1" value="151">Colocation pour travail</option>
<option class="level-1" value="440">Vacance</option>
<option class="level-0" value="72">Luxe</option>
<option class="level-1" value="76">Appartement</option>
</select>
jQuery
jQuery("#prop_category_submit").change(function(){
const currentVal = jQuery("#prop_category_submit").val();
let imputList = ["property_size","property_lot_size"];
if (['149','150','151','440','72','76'].includes(currentVal)) {
for (let i = 0; i < imputList.length; i++) {
const elmnt = imputList[i];
jQuery("#"+elmnt).parent().css({'display':'none'});
}
}else{
for (let i = 0; i < imputList.length; i++) {
const elmnt = imputList[i];
jQuery("#"+elmnt).parent().css({'display':'block'});
}
}
});
Submit form
<div class="profile-onprofile row">
<div class="col-md-6">
<label for="property_size"> Superficie en m<sup>2</sup> .</label>
<input type="number" id="property_size" size="40" class="form-control" name="property_size" value="">
</div>
<div class="col-md-6 ">
<label for="property_lot_size"> Superficie du lot en m<sup>2</sup> . </label>
<input type="number" id="property_lot_size" size="40" class="form-control" name="property_lot_size" value="">
</div>

I fixed this question by using this code
jQuery("#prop_category_submit").change(function(){
const currentVal = jQuery("#prop_category_submit").val();
let imputList = ["property_rooms","property_bedrooms","property_bathrooms", "meuble","property_size"];
if (['65','37','66','68','70','69','67','71','27'].includes(currentVal)) {
if(currentVal=="65"){ //Terrains
jQuery("#property_rooms").parent().css('display','none');
jQuery("#property_bedrooms").parent().css('display','block');
jQuery("#property_bathrooms").parent().css('display','block');
jQuery("#meuble").parent().css('display','block');
jQuery("#property_lot_size").parent().css('display','none');
jQuery("#property-garage").parent().css('display','block');
jQuery("#property_size").parent().css('display','block');
}
}else{
for (let i = 0; i < imputList.length; i++) {
const elmnt = imputList[i];
jQuery("#"+elmnt).parent().css({'display':'block'});
}
}
});

Creating check-boxes out of an array in JavaScript

I have an array, which is hard-coded for now, and I am trying to create checkboxes based on the array elements that I have.
var features = document.getElementById('features')
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"];
for(var i = 0; i < options.length; i++) {
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.innerHTML = options[i];
x.name = options[i];
features.appendChild(x);
}
<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
<option value="selectcard">Select Target</option>
</select>
<br><br>
<label>All Features:</label>
<div id='features'>
</div>
<br>
<button id="btn-features">Select All</button>
<br><br>
<button id="btn-remove">Remove All</button>
I cannot see names of checkboxes as the elements of the array.
Any help please?

Checkboxes do not automatically add a label next to them. So you need to add the <label> tag for each checkbox. In my version of your code here, I have also added the for attribute to each label so that clicking the label will toggle it's matching checkbox.
var features = document.getElementById('features')
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"];
for(var i = 0; i < options.length; i++) {
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.value = options[i];
x.id = 'checkbox-' + options[i];
var y = document.createElement('LABEL');
y.textContent = options[i];
y.setAttribute('for', x.id);
features.appendChild(x);
features.appendChild(y);
}
<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
<option value="selectcard">Select Target</option>
</select>
<br><br>
<label>All Features:</label>
<div id='features'>
</div>
<br>
<button id="btn-features">Select All</button>
<br><br>
<button id="btn-remove">Remove All</button>
As suggested by Scott Marcus, you may also choose to wrap your label around the checkbox to avoid the need to use the for attribute and an id. Here is one way to do it:
var features = document.getElementById('features')
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"];
for(var i = 0; i < options.length; i++) {
var x = document.createElement("INPUT");
x.setAttribute("type", "checkbox");
x.value = options[i];
var z = document.createElement('SPAN');
z.textContent = options[i];
var y = document.createElement('LABEL');
y.appendChild(x);
y.appendChild(z);
features.appendChild(y);
}
<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
<option value="selectcard">Select Target</option>
</select>
<br><br>
<label>All Features:</label>
<div id='features'>
</div>
<br>
<button id="btn-features">Select All</button>
<br><br>
<button id="btn-remove">Remove All</button>

Well, if you have the balls to use .innerHTML (at least once), you could simply do it like this: ;-)
var options = ["Col1", "Col2", "Col3", "Col4", "Col5"];
document.getElementById('features').innerHTML=
options.map(o=>'<label><input type="checkbox" name="'+o+'">'+o+'</label>').join(" ");
document.onclick=ev=>{
if (ev.target.tagName==="BUTTON")
document.querySelectorAll("input[type=checkbox]").forEach(c=>c.checked=ev.target.textContent[0]==="S")}
<label>Select Target</label>
<select name="targetColumn" id="selectTargetOptions">
<option value="selectcard">Select Target</option>
</select>
<br><br>
<label>All Features:</label>
<div id='features'>
</div>
<br>
<button id="btn-features">Select All</button>
<br><br>
<button id="btn-remove">Remove All</button>

How to make dependent dropdown list from Google Sheet?

I have a Google sheet with custom HTML form. The form contains two <select> elements.
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="category_name">Категория</label>
</div>
<select class="custom-select" id="category_name" name="category_name" required>
<option value="" selected></option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="contragent_name">Контрагент</label>
</div>
<select class="custom-select" id="contragent_name" name="contragent_name">
<option value="" selected></option>
</select>
</div>
I want to get dependent dropdown list at the second selection (contragent_name).
Just two lists:
first: if selected value of category_name is not equal to 'Заработная Плата' --> contragent_name selection list must be populated with getContragent() (just values of one column)
second: if selected value of category_name is equal to 'Заработная Плата' --> contragent_name selection list must be populated with getStaffList() (just array with names) with required attribute.
I tried to write script but it does not work
<script>
(function () {
google.script.run.withSuccessHandler(
function (selectList) {
var select = document.getElementById("category_name");
for( var i=0; i<selectList.length; i++ ) {
var option = document.createElement("option");
option.value = selectList[i][0];
option.text = selectList[i][0];
select.add(option);
}
}
).getCategory();
}());
$(function() {
$('#category_name').on("change", function () {
if ($(this).val() !== 'Заработная Плата') {
function () {
google.script.run.withSuccessHandler(
function (selectList) {
var select = document.getElementById("contragent_name");
for( var i=0; i<selectList.length; i++ ) {
var option = document.createElement("option");
option.value = selectList[i][0];
option.text = selectList[i][0];
select.add(option);
}
}
).getContragent();
}()} else {
function () {
google.script.run.withSuccessHandler(
function (selectList) {
var select = document.getElementById("contragent_name");
select.required = true;
for( var i=0; i<selectList.length; i++ ) {
var option = document.createElement("option");
option.value = selectList[i];
option.text = selectList[i];
select.add(option);
}
}
).getStuffList();
}()}
});
});
</script>
Where I'm wrong and how to fix it?

HTML
<!DOCTYPE html>
<html>
<head>
<title>My Dependent Dropdown</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<form>
<div class="form-group col-md-4">
<label for="category">Category</label>
<select id="category" class="form-control" required>
</select>
</div>
<div class="form-group col-md-4">
<label for="items">Items</label>
<select id="items" class="form-control" required>
</select>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
JS
var db = [["Vegetable","Carrot"],["Vegetable","Onion"],["Fruit","Apple"],["Fruit","Banana"]];
$(document).ready(function(){
var categoryLists = db.map(x => x[0]);
categoryLists = [... new Set(categoryLists)]; //get unique category values
categoryLists.forEach(x => $("#category").append(new Option(x, x))); //new Option("text", "value")
$("#category").on("change",updateItemLists).change(); //add event listner and trigger it once to show items
});
function updateItemLists(){
var category = $("option:selected", this).text(); //get category
var itemLists = db.filter(x => x[0] == category).map(x =>x[1]);
$("#items option").remove();
itemLists.forEach( (x, i) => $("#items").append(new Option(x,i))); //x: array value ; i: array index
};

How to get value from select box in html table

I'm trying to retrieve a value from a select box in my HTML table. How can I select the selected value?
What I've tried so far:
this.cells[14].innerHTML;
this.cells[14].children[0].innerhtml;
this.cells[14].children[0].innerText;
The last one .innerText returns all the items in my select box......
var table2 = document.getElementById('table_items_program');
for (var i2 = 1; i2 < table2.rows.length; i2++) {
table2.rows[i2].onclick = function () {
document.getElementById("id").value = this.cells[0].innerHTML;
document.getElementById("select").value = this.cells[14].children[0].innerText;
}
}
<td><select class="selectpicker" multiple>
<?php while ($row9 = mysqli_fetch_assoc($result9)):; ?>
<option value="<?php echo $row9['id']; ?>"><?php echo $row9['id'];?>
</option>
<?php endwhile; ?>
</select></td>
<input style="display: inline" id="id" name="id">
<input style="display: inline" id="select" name="select">
The selected value from my selection box in my HTML table

How can I select the selected value?
You can get the selected index with the method HTMLSelect​Element​.selected​Index
But if I understand your trouble. You try to get the current values of your select. So you need to get the value of your selected options.
You can do it like:
document.getElementById('mySelect').onchange = function() {
let options = this && this.options;
let selectedValues = []
for (var i = options.length; i--;) {
let opt = options[i];
if (opt.selected) {
selectedValues.push(opt.value || opt.text);
}
}
console.log(selectedValues)
}
<select id="mySelect" multiple>
<option value="a"> a </option>
<option value="b"> b </option>
<option value="c"> c </option>
</select>
Implementation into your code example
for (var i2 = 1; i2 < table2.rows.length; i2++) {
table2.rows[i2].onclick = function() {
document.getElementById("id").value = this.cells[0].innerHTML;
var options = this && this.cells[14].children[0].options;
var selectedValues = []
for (var i = options.length; i--;) {
var opt = options[i];
if (opt.selected) {
selectedValues.push(opt.value || opt.text);
}
}
document.getElementById("select").value = JSON.stringify(selectedValues);
}
}

so simple...
ShowSelected.onclick = function()
{
console.clear()
document.querySelectorAll('.selectpicker option:checked').forEach(opt=>console.log(opt.value))
}
.selectpicker {
vertical-align: text-top;
}
choose one or more :
<select class="selectpicker" multiple size=6 >
<option value="a"> A element</option>
<option value="b"> B element</option>
<option value="c"> C element</option>
<option value="d"> D element</option>
<option value="e"> E element</option>
<option value="f"> F element</option>
</select>
<button id="ShowSelected"> Show Selected</button>

Welcome to Stack Overflow!
So, your <select> has the class selectpicker. We can use this to select your <select>!
Try the following to get your value:
document.querySelector(".selectpicker").value;
Or, if you have multiple <select>'s, you can use
[...document.querySelectorAll(".selectpicker")].forEach(opt => {
console.log(opt.value)
});
Hope that clears things up a little.

radio button selects list box change and pass null value to each list box

when radio button selects list box change and pass null value to each list box ...like Null value or empty space.....
its java script code::
<div>
<input type="radio" name="rdo" id="rdo1" value="list1" />Radio1
<select id="select1" style='display:none;'>
<option value="l1">1.1</option>
<option value="l2">2.2</option>
</select>
</div>
<div>
<input type="radio" name="rdo" id="rdo2" checked="checked" value="list2"/>Radio2
<select id="select2">
<option value="l1">2.1</option>
<option value="l2">2.2</option>
</select>
</div>
<script>
function select1() {
document.getElementById("select1").style.display="block";
document.getElementById("select2").style.display="none";
}
function select2() {
document.getElementById("select2").style.display="block";
document.getElementById("select1").style.display="none";
}
document.getElementById("rdo1").onclick = select1;
document.getElementById("rdo2").onclick = select2;
</script>

I hope this what you expect.
See in [jsFiddle][1]
[1]: http://jsfiddle.net/x2n9W/1/. Now see my updated code
function select1(someValue) {
document.getElementById("select1").style.display = "block";
var option = document.createElement("option");
option.value = "";
option.text = "";
document.getElementById("select1").appendChild(option);
document.getElementById("select2").style.display = "none";
}
function select2(someValue) {
document.getElementById("select2").style.display = "block";
document.getElementById("select1").style.display = "none";
var option = document.createElement("option");
option.value = "";
option.text = "";
document.getElementById("select2").appendChild(option);
}
document.getElementById("rdo1").onclick = function () {
select1('someValue1');
}
document.getElementById("rdo2").onclick = function () {
select2('someValue2');
}

Try this:
<div>
<input type="radio" class="radiobtns" name="rdo" id="rdo1" value="list1" />Radio1
<select id="select1" class="select_list" style='display:none;'>
<option value="l1">1.1</option>
<option value="l2">2.2</option>
</select>
</div>
<div>
<input type="radio" class="radiobtns" name="rdo" id="rdo2" checked="checked" value="list2"/>Radio2
<select id="select2" class="select_list">
<option value="l1">2.1</option>
<option value="l2">2.2</option>
</select>
</div>
<script>
$('.radiobtns').click(function(event){
var $ele = $(event.currentTarget),
$select = $ele.siblings('.select_list');
$('.select_list').hide();
var empty_exists = $select.find('option').filter(function() {
return this.value == null || this.value == '';
});
if(empty_exists.length == 0){
$select.append('<option value=""></option>');
$select.val('');
}
$select.show();
});
</script>
see the demo http://jsfiddle.net/x2n9W/8/ using jquery and javascript