We Keep Coding

Add third list on dependent dropdown list JS

I'm trying to create a dynamic dependent drop down lists. This code below work fine with 2 dependency and I’m trying to add a third dependency. Have you got any idea ?
For exemple :
Status 1 = offer 1, offer 2, offer 3 , offer 4
Offer 1 = Option 1
Thanks for your help
UPDATE 11.15.09
Finally find a solution
$("#street").val([]);
$('#street option').hide();
$("#city").on("change", function() {
$('#street option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#street").val([]);
})
$("#number").val([]);
$('#number option').hide();
$("#street").on("change", function() {
$('#number option')
.hide() // hide all
.filter('[value^="' + $(this).val() + '"]') // filter options with required value
.show(); // and show them
$("#number").val([]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
City:
<select id="city" name="city">
<option value="0">Select City</option>
<option value="1">Manchester</option>
<option value="2">Leicester</option>
<option value="3">Londra</option>
</select>
Street:
<select id="street" name="street">
<option value="1.A">Street A</option>
<option value="1.B">Street B</option>
<option value="1.C">Street C</option>
<option value="2.D">Street D</option>
<option value="2.E">Street E</option>
<option value="2.F">Street F</option>
<option value="3.G">Street G</option>
<option value="3.H">Street H</option>
</select>
Number:
<select id="number" name="number">
<option value="1.A">1</option>
<option value="1.B">2</option>
<option value="1.C">3</option>
<option value="2.D">4</option>
<option value="2.E">5</option>
</select>

I fixed the problem with javascript. (no need to use jQuery)
Please try to use updated code below.
HTML:
<div>
<select name="select1" id="select1">
<option value="1" data-sync="1">Status 1</option>
<option value="2" data-sync="2">Status 2</option>
</select>
</div>
<div>
<select name="select2" id="select2">
<option value="1">offer 1</option>
<option value="1">offer 2</option>
<option value="1">offer 3</option>
<option value="1">offer 4</option>
<option value="1">offer 5</option>
<option value="2">offer 6</option>
<option value="2">offer 7</option>
<option value="2">offer 8</option>
<option value="2">offer 9<option>
</select>
</div>
<div>
<select name="select3" id="select3">
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="1">option 3</option>
<option value="2">option 4</option>
</select>
</div>
Javascript:
document.getElementById("select1").onchange=function() {
document.getElementById("select2").value=this.options[this.selectedIndex].getAttribute("data-sync");
document.getElementById("select3").value=this.options[this.selectedIndex].getAttribute("data-sync");
}
document.getElementById("select1").onchange();
Check the running code link below.
http://jsfiddle.net/f97u5nLa/33/

Collapse / expand optgroup using select2

I'm trying to use the Select2 jquery plugin to make the optgroups in my select drop down menu collapsible/expandable.
I found what looks to be a good and straightforward solution (https://github.com/select2/select2/issues/730) but it's not working for me and I think it's because it's from an older version of select2.
I've figured out how to update the css from
.select2-result-sub > li.select2-result {
display: none;
}
to
#select-container .select2-results__options--nested > li.select2-results__option {
display: none;
}
(where i've also put my select object in a container per How to override .select2-results .select2-highlighted color)
But I'm at a loss for how to update the required javascript:
$('.select2-results').on('click', 'li', function(){
$(this).find('li').show();
});
It seems to me like I would just need to replace select2-results with select2-results__options or select2-results__option, but I've tried a number of things, with and without using the container and I just can't get it to work. I don't have much experience in javascript/jquery so I don't really understand what I'm doing wrong with trying to select the optgroup element.
Also, here's my html:
<div id="select-container">
<select id="select-test" multiple="multiple" style="width:300px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
</div>
Any help is appreciated, thanks!!

Here's a simple demo.
$("#select-test").select2();
$("body").on('click', '.select2-results__group', function() {
$(this).siblings().toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
<select id="select-test" multiple="multiple" style="width:300px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
</div>
Edit:
We can start the optgroup as collapsed by using select2:open event. I add an object to record the collapsed state of each optgroup.
Set opacity to 0 and set it back to 1 after determining the collapsed state of each optgroup.
Note that select2:open triggered before the .select2-results__group created, so I use setTimeout to wait for a few miliseconds.
$("#select-test").select2();
let optgroupState = {};
$("body").on('click', '.select2-container--open .select2-results__group', function() {
$(this).siblings().toggle();
let id = $(this).closest('.select2-results__options').attr('id');
let index = $('.select2-results__group').index(this);
optgroupState[id][index] = !optgroupState[id][index];
})
$('#select-test').on('select2:open', function() {
$('.select2-dropdown--below').css('opacity', 0);
setTimeout(() => {
let groups = $('.select2-container--open .select2-results__group');
let id = $('.select2-results__options').attr('id');
if (!optgroupState[id]) {
optgroupState[id] = {};
}
$.each(groups, (index, v) => {
optgroupState[id][index] = optgroupState[id][index] || false;
optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide();
})
$('.select2-dropdown--below').css('opacity', 1);
}, 0);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
<select id="select-test" multiple="multiple" style="width:300px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</optgroup>
</select>
</div>

Click event on page load on a Select tag

I have a select tag with 4 options. I want to get a particular option clicked when the page loads and a method should called because of click event. Here what I have tried so far:
HTML
<select>
<option >Select an option...</option>
<option >Option 1</option>
<option >Option 2</option>
<option >Option 3</option>
<option id="lop" onclick="myFunction()">Option 4</option>
</select>
Jquery
$(document).ready(function(){
$("#lop").trigger("click");
function myFunction(){
alert("hi");
}
});
JsFiddle

You could try that:
$(document).ready(function(){
var opt = $("#a").val();
if (opt == 4) {
myFunction();
}
function myFunction(){
alert("hi");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option id="a" value=4>Option 4</option>
</select>

Please change your Js with the following code:
$(document).ready(function(){
function myFunction(){
alert("hi");
}
$("#myselect").change(function() {
var opt = $(this).val();
if(opt == '4'){
myFunction();
}
});
var opt1 = $("#myselect").val("4");
if(opt1){
myFunction();
}
});
And remove onclick function from your option
<select id="myselect">
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option id="lop" value=4>Option 4</option>
</select>

Simply You can set the value of Select option dynamically like this
$(document).ready(function(){
$("#selectInp").val(4);
});
With HTML Provide an Id to your Select
<select id="selectInp">
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option id="lop" onclick="myFunction()" value=4>Option 4</option>
Updated fiddle:
https://jsfiddle.net/j9o6ra3x/514/
OR If you want to work as your Solution
Simply,
$("#lop").trigger("click"); // Instead of
$("#lop").prop('select',true); // Put this on ready
enter code here

You need to use on change like below
$(document).ready(function(){
alert(this.value);
$('.selectList').on('change', function(){
alert(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectList">
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option id="lop" onclick="myFunction()" value=4>Option 4</option>
</select>

This might help you, you should trigger a change event on select to trigger after the page load,
$(document).ready(function(){
$("#lop").trigger("click");
$('select').on('change', function(){
var val= $(this).val();
if(val == 4) myFunction();
})
});
function myFunction(){
alert("hi");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select>
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option id="lop" onclick="myFunction()" value=4>Option 4</option>
</select>

Shortest way do this:
$(window).load(function(){
$('select').val('3').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option id="lop" onclick="myFunction()" value=4>Option 4</option>
</select>

Do this:
$(document).ready(function(){
$("#mySelect").click(function(){
var opt = $("#mySelect option:selected").val();
if (opt == 4) {
myFunction();
}
});
function myFunction(){
alert("hi");
}
});
<select id="mySelect">
<option value=''>Select an option...</option>
<option value=1>Option 1</option>
<option value=2 >Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
</select>
https://jsfiddle.net/j9o6ra3x/491/

You can use change event to achieve the functionality you desire.
using .change()
$('#lop').change(function(){
//your function
})
using .bind()
$('#lop').bind('change',function(){
//your function
});
Then you can trigger change on page load:
$(function () {
$("select#myselect").change();
});

<select id='selectInp' size='<?php echo $prod_count;?>' onclick='window.loadStates()' class='form-control' name='categ'><li><option id='toate' value='999'>Toate produsele</option>
$(document).ready(function(){
$("#selectInp").val(999);
$("#toate").trigger("click");
});

Auto complete type in text field from a dropdown

I don't know if it is simple or no. What I want to solve is,
One drop down "select" form field is there, another "input type="text" " field is below. Some options are there in "select dropdown". When I type in Below "input type="text" " field, There should be some suggestions from the above "select" dropdown field (like Auto Complete). Any help?

You can use the normal <select> tag with Select2:
$(function () {
$("select").select2({
width: 250
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" />
<select name="" id="">
<option value="item-1">Item 1</option>
<option value="item-2">Item 2</option>
<option value="item-3">Item 3</option>
<option value="item-4">Item 4</option>
<option value="item-5">Item 5</option>
<option value="entry-1">Entry 1</option>
<option value="entry-2">Entry 2</option>
<option value="entry-3">Entry 3</option>
<option value="entry-4">Entry 4</option>
<option value="entry-5">Entry 5</option>
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
<option value="option-4">Option 4</option>
<option value="option-5">Option 5</option>
</select>

jQuery Setting an option on a select box

I can't seem to get this to work...
<select id="selectBox">
<option value="A">Number 0</option>
<option value="B">Number 1</option>
<option value="C">Number 2</option>
<option value="D">Number 3</option>
<option value="E">Number 4</option>
<option value="F">Number 5</option>
<option value="G">Number 6</option>
<option value="H">Number 7</option>
</select>
$('#selectBox option[value=C]').attr('selected', 'selected');

Unless you are trying to do a multi-select list box, why not:
$('#selectBox').val('C');