I have repeated select, like below:
<select class="select-list">
<option data-type="car">one</option>
<option data-type="bus">two</option>
<option data-type="truck">three</option>
</select>
<select class="select-list">
<option data-type="car">one</option>
<option data-type="bus">two</option>
<option data-type="truck">three</option>
</select>
<select class="select-list">
<option data-type="car">one</option>
<option data-type="bus">two</option>
<option data-type="truck">three</option>
</select>
<select class="select-list">
<option data-type="car">one</option>
<option data-type="bus">two</option>
<option data-type="truck">three</option>
</select>
in jquery I need to if user has select type="car" twice, any ideas?
You may combine the change event with the filter() method.
In order to disallow to select a value already selected you may use an additional data parameter for each select.
$('.select-list').on('change', function(e) {
var sel = this.value;
if ($('.select-list').filter((i,e) => e.value == sel).length > 1) {
$(this).val(this.dataset.oldSelected);
console.log("you cannot select twice...");
} else {
this.dataset.oldSelected = sel;
}
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select-list">
<option data-type="car" selected>one</option>
<option data-type="bus">two</option>
<option data-type="truck">three</option>
</select>
<select class="select-list">
<option data-type="car">one</option>
<option data-type="bus" selected>two</option>
<option data-type="truck">three</option>
</select>
<select class="select-list">
<option data-type="car">one</option>
<option data-type="bus">two</option>
<option data-type="truck" selected>three</option>
</select>
Related
What's the correct syntax for the onChange es6 function?
function myEvent(e){
console.log(e.target)
}
<select onChange=(event)=>{console.log(event.target)}>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange={console.log(event.target)}>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange="myEvent(event)">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange=function(){console.log("hello"))>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
I was just wondering if it was possible to have a multi line function embedded in the html. Appears the answer is n
You can. The value of the on* attributes become the body of a function. Therefore you can define a function inline but you also have to call it.
For example:
<select onChange="function foo(){
console.log('hello')
}
foo();">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<!-- as IIFE -->
<select onChange="(function(){console.log('hello')}())">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<!-- of course that works with arrow functions too -->
<select onChange="(() => {console.log('hello')
console.log('goodbye')})()">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Try sending the event as a parameter to the js function and use it there
const onChangeHandler = (e) => {
const selectedValue = e.target.value;
console.log(selectedValue)
}
<select onChange="onChangeHandler(event)">
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
Inline javascript context you can do
ARROW Function
<select onchange="(() => console.log(event.target.value))()">
REACTJS Context
check curly braces and event.target.value
<select onChange={(event) => console.log(event.target.value) }>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<select onChange={(event) => {console.log(event.target.value)} }>
<option value="5"> 5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
This is not an actual answer but a demonstration that the task at hand can be done in a much easier way.
document.body.onchange=e=>{
console.log(e.target.value)
}
<select>
<option> 5</option>
<option> 6</option>
<option>15</option>
</select>
<select>
<option> 5</option>
<option> 7</option>
<option>15</option>
</select>
<select>
<option> 5</option>
<option> 8</option>
<option>15</option>
</select>
<select>
<option> 5</option>
<option> 9</option>
<option>15</option>
</select>
I pre-populated select tag tags with option values coming from PHP variables, and the HTML looks like this:
<!-- Type -->
<select id="d1">
<option type="colours" value="Colours">Colours</option>
<option type="fruit" value="Fruit">Fruit</option>
</select>
<!-- Group -->
<select id="d2">
<option type="colours_dark" subtype="dark" value="Dark">Dark</option>
<option type="colours_light" subtype="light" value="Light">Light</option>
<option type="fruit_ripe" value="Ripe">Ripe</option>
<option type="fruit_rotten" value="Rotten">Rotten</option>
</select>
<!-- Items -->
<select id="d3" style="display: none;">
<option value="">Choose a color</option>
<option type="colours_dark" value="Black">Black</option>
<option type="colours_dark" value="Brown">Brown</option>
<option type="colours_dark" value="Grey">Grey</option>
<option type="colours_light" value="Red">Red</option>
<option type="colours_light" value="Green">Green</option>
<option type="colours_light" value="Blue">Blue</option>
<option type="fruit_ripe" value="Banana">Banana</option>
<option type="fruit_ripe" value="Apple">Apple</option>
<option type="fruit_ripe" value="Orange">Orange</option>
<option type="fruit_rotten" value="Pear">Pear</option>
<option type="fruit_rotten" value="Peach">Peach</option>
<option type="fruit_rotten" value="Mango">Mango</option>
</select>
Initially, I don't want the third dropdown to show because the values will depend on the second dropdown, so I added the following to my jQuery snippet:
var dropDown1Selected = dropDown1.find('option').filter(':selected').val();
if(dropDown3.find('option').filter(':selected').val() == '') {
dropDown3.hide();
}
Based on my HTML, how do I make the options of dropdown 2 show depending on dropdown 1, and then have dropdown 3 showing depending on dropdown 3?
Eg: If I select fruit from dropdown 1, dropdown 2 should only show Ripe, and Rotten. And if I choose Ripe, then dropdown 3 should only show Apple and Orange.
I tried the following in my jQuery snippet, but am struggling to change the dropdown options:
$('#d1').on('change', function(e) {
var val = this.value;
// check if val exists in d2 options
$("#d2 option").filter(function() {
});
}).change();
Hope this work for you, I make dropdown 3 filtered with dropdown 2 so you don't need to hide it
$(document).ready(function () {
filterOption("d1", "d2");
filterOption("d2", "d3");
})
$('#d1').on('change', function (e) {
filterOption("d1", "d2");
filterOption("d2", "d3");
})
$('#d2').on('change', function (e) {
filterOption("d2", "d3");
})
function filterOption(parent, child) {
var parent = $(`#${parent} :selected`).attr('type');
$(`#${child} option`).each(function () {
if ($(this).val() == "" || $(this).attr('type').includes(parent)) {
$(this).show();
}
else {
$(this).hide();
}
})
$(`#${child}`).val($(`#${child} option:visible:first`).val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Type -->
<select id="d1">
<option type="colours" value="Colours">Colours</option>
<option type="fruit" value="Fruit">Fruit</option>
</select>
<!-- Group -->
<select id="d2">
<option type="colours_dark" subtype="dark" value="Dark">Dark</option>
<option type="colours_light" subtype="light" value="Light">Light</option>
<option type="fruit_ripe" value="Ripe">Ripe</option>
<option type="fruit_rotten" value="Rotten">Rotten</option>
</select>
<!-- Items -->
<select id="d3">
<option value="">Choose a color</option>
<option type="colours_dark" value="Black">Black</option>
<option type="colours_dark" value="Brown">Brown</option>
<option type="colours_dark" value="Grey">Grey</option>
<option type="colours_light" value="Red">Red</option>
<option type="colours_light" value="Green">Green</option>
<option type="colours_light" value="Blue">Blue</option>
<option type="fruit_ripe" value="Banana">Banana</option>
<option type="fruit_ripe" value="Apple">Apple</option>
<option type="fruit_ripe" value="Orange">Orange</option>
<option type="fruit_rotten" value="Pear">Pear</option>
<option type="fruit_rotten" value="Peach">Peach</option>
<option type="fruit_rotten" value="Mango">Mango</option>
</select>
In a project I'm working on, I have 2 dropdown menus, state and area. I need to change the optgroup(which as options) in area based on the value of state. Whatever I've tried always works on Chrome & Firefox but never Safari.
What I tried, part 1
Initially, I just set the hidden attribute to true of the optgroup in area based on the value of state in Javascript. Worked in Chrome & Firefox. Safari? No.
What I tried, part 2
Alright, this time I set the disabled attribute to true and in CSS set the display to none for opt groups that are disabled. Code below.
const states_field = document.getElementById('state_search');
const areas_field = document.getElementById('areas_search');
states_field.addEventListener('change', filterArea);
function filterArea() {
console.log('working');
// 1. get the state selected by user
const selectedState = states_field.value;
console.log(selectedState);
// 2. go through all the states within the areas field
const areasStates = areas_field.getElementsByTagName('optgroup');
for (let i = 0; i < areasStates.length; i++) {
const areaState = areasStates[i];
console.log(areaState);
// 3. check if the selected state equals to any states in the areas field
if (selectedState != areaState.attributes.label.value) {
console.log(selectedState === areaState.attributes.label.value);
// 4. if not equal, set the optgroup hidden property to true
areaState.disabled = true;
console.log(areaState.disabled);
} else {
// 5. if equal, unhide
areaState.disabled = false;
console.log(areaState.disabled);
}
}
}
optgroup:disabled {
display: none;
}
h4 {
display: inline-block;
}
<h4>State</h4>
<select name="state_search" id="state_search">
<option value=""></option>
<option value="Johor">Johor</option>
<option value="Kedah">Kedah</option>
<option value="Kelantan">Kelantan</option>
<option value="Kuala Lumpur">Kuala Lumpur</option>
<option value="Labuan">Labuan</option>
<option value="Melaka">Melaka</option>
<option value="Negeri Sembilan">Negeri Sembilan</option>
<option value="Pahang">Pahang</option>
<option value="Penang">Penang</option>
<option value="Perak">Perak</option>
<option value="Perlis">Perlis</option>
<option value="Sabah">Sabah</option>
<option value="Sarawak">Sarawak</option>
<option value="Selangor">Selangor</option>
<option value="Terengganu">Terengganu</option>
</select>
<h4>Area</h4>
<select name="areas_search" id="areas_search">
<option value=""></option>
<optgroup label="Johor">
<option value="12">Batu Pahat</option>
<option value="13">Johor Bahru</option>
<option value="14">Kluang</option>
<option value="15">Kota Tinggi</option>
<option value="16">Kulai</option>
<option value="17">Mersing</option>
<option value="18">Muar</option>
<option value="19">Pontian</option>
<option value="20">Segamat</option>
<option value="21">Tangkak</option>
</optgroup>
<optgroup label="Kedah">
<option value="22">Baling</option>
<option value="23">Bandar Baharu</option>
<option value="24">Kota Setar</option>
<option value="25">Kuala Muda</option>
<option value="26">Kubang Pasu</option>
<option value="27">Kulim</option>
<option value="28">Langkawi</option>
<option value="29">Padang Terap</option>
<option value="30">Pendang</option>
<option value="31">Pokok Sena</option>
<option value="32">Sik</option>
<option value="33">Yan</option>
</optgroup>
<optgroup label="Kelantan">
<option value="34">Bachok</option>
<option value="35">Gua Musang</option>
<option value="36">Jeli</option>
<option value="37">Kota Bharu</option>
<option value="38">Kuala Krai</option>
<option value="39">Machang</option>
<option value="40">Pasir Mas</option>
<option value="41">Pasir Puteh</option>
<option value="42">Tanah Merah</option>
<option value="43">Tumpat</option>
</optgroup>
<optgroup label="Kuala Lumpur">
<option value="1">Kepong</option>
<option value="2">Segambut</option>
<option value="3">Batu</option>
<option value="4">Wangsa Maju</option>
<option value="5">Setiawangsa</option>
<option value="6">Titiwangsa</option>
<option value="7">Bukit Bintang</option>
<option value="8">Lembah Pantai</option>
<option value="9">Seputeh</option>
<option value="10">Cheras</option>
<option value="11">Bandar Tun Razak</option>
</optgroup>
<optgroup label="Labuan">
<option value="102">Victoria</option>
</optgroup>
<optgroup label="Melaka">
<option value="44">Alor Gajah</option>
<option value="45">Central Melaka</option>
<option value="46">Jasin</option>
</optgroup>
<optgroup label="Negeri Sembilan">
<option value="47">Jelebu</option>
<option value="48">Jempol</option>
<option value="49">Kuala Pilah</option>
<option value="50">Port Dickson</option>
<option value="51">Rembau</option>
<option value="52">Seremban</option>
<option value="53">Tampin</option>
</optgroup>
<optgroup label="Pahang">
<option value="54">Bentong</option>
<option value="55">Bera</option>
<option value="56">Cameron Highlands</option>
<option value="57">Jerantut</option>
<option value="58">Kuantan</option>
<option value="59">Lipis</option>
<option value="60">Maran</option>
<option value="61">Pekan</option>
<option value="62">Raub</option>
<option value="63">Rompin</option>
<option value="64">Temerloh</option>
</optgroup>
<optgroup label="Penang">
<option value="65">Central Seberang Perai</option>
<option value="66">North Seberang Perai</option>
<option value="67">South Seberang Perai</option>
<option value="68">Northeast Penang Island</option>
<option value="69">Southwest Penang Island</option>
</optgroup>
<optgroup label="Perak">
<option value="70">Bagan Datuk</option>
<option value="71">Batang Padang</option>
<option value="72">Hilir Perak</option>
<option value="73">Hulu Perak</option>
<option value="74">Kampar</option>
<option value="75">Kerian</option>
<option value="76">Kinta</option>
<option value="77">Kuala Kangsar</option>
<option value="78">Larut</option>
<option value="79">Matang</option>
<option value="80">Selama</option>
<option value="81">Manjung</option>
<option value="82">Muallim</option>
<option value="83">Perak Tengah</option>
</optgroup>
<optgroup label="Perlis">
<option value="84">Kangar</option>
</optgroup>
<optgroup label="Sabah">
<option value="103">Beaufort</option>
<option value="104">Beluran</option>
<option value="105">Keningau</option>
<option value="106">Kota Belud</option>
<option value="107">Kinabatangan</option>
<option value="108">Kota Kinabalu</option>
<option value="109">Kota Marudu</option>
<option value="110">Kota Penyu</option>
<option value="111">Kudat</option>
<option value="112">Kunak</option>
<option value="113">Lahad Datu</option>
<option value="114">Nabawan</option>
<option value="115">Papar</option>
<option value="116">Penampang</option>
<option value="117">Putatan</option>
<option value="118">Pitas</option>
<option value="119">Ranau</option>
<option value="120">Sandakan</option>
<option value="121">Semporna</option>
<option value="122">Sipitang</option>
<option value="123">Tambunan</option>
<option value="124">Tawau</option>
<option value="125">Telupid</option>
<option value="126">Tenom</option>
<option value="127">Tongod</option>
<option value="128">Tuaran</option>
</optgroup>
<optgroup label="Sarawak">
<option value="129">Betong</option>
<option value="130">Bintulu</option>
<option value="131">Kapit</option>
<option value="132">Kuching</option>
<option value="133">Limbang</option>
<option value="134">Miri</option>
<option value="135">Mukah</option>
<option value="136">Samarahan</option>
<option value="137">Sarikei</option>
<option value="138">Serian</option>
<option value="139">Sibu</option>
<option value="140">Sri Aman</option>
</optgroup>
<optgroup label="Selangor">
<option value="85">Gombak</option>
<option value="86">Hulu Langat</option>
<option value="87">Hulu Selangor</option>
<option value="88">Klang</option>
<option value="89">Kuala Langat</option>
<option value="90">Kuala Selangor</option>
<option value="91">Petaling</option>
<option value="92">Sabak Bernam</option>
<option value="93">Sepang</option>
</optgroup>
<optgroup label="Terengganu">
<option value="94">Besut</option>
<option value="95">Dungun</option>
<option value="96">Hulu Terengganu</option>
<option value="97">Kemaman</option>
<option value="98">Kuala Nerus</option>
<option value="99">Kuala Terengganu</option>
<option value="100">Marang</option>
<option value="101">Setiu</option>
</optgroup>
</select>
Works in Chrome & Firefox. Safari? No.
Is there any way to hide an optgroup in Safari with plain JS without having to resort to jQuery or other libraries?
Edit: So I tried to do this with jQuery and it still didn't work on Safari, after looking around on Webkit Bugzilla it seems that it's a bug
https://bugs.webkit.org/show_bug.cgi?id=8351 , doesn't look like it's solved yet....
<select id="byplanname" name="byplanname" style="display:none;">
<option value="Select Plan Name" multiple="multiple">Select Plan Name</option>
<option value="815" href="#page_3">815</option>
<option value="816">816</option>
<option value="816">817</option>
<option value="818">818</option>
<option value="820">820</option>
<option value="821">821</option>
<option value="822">822</option>
<option value="823">823</option>
<option value="904">904</option>
</select>
The href="#page_3" is not working ,Please tell me proper linking in intel xdk..thanx
Try something like this:
<select id="byplanname" name="byplanname" onchange="location = this.options[this.selectedIndex].value;">
<option value="google.com">815</option>
<option value="google.com">816</option>
<option value="google.com">817</option>
<option value="google.com">818</option>
<option value="google.com">820</option>
<option value="google.com">821</option>
<option value="google.com">822</option>
<option value="google.com">823</option>
<option value="google.com">904</option>
</select>
For using #page_3 you will have to put in your URL before that so it would be website.com/#page3 in the value field
JSFiddle:
http://jsfiddle.net/fqB3Z/
how to position to an option in a select box when opened but the initial value should be empty?
ex:
<select>
<option value="" disabled selected style="display:none"></option>//<--- Initial value
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option> // <--- Automatically points here when opened
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
http://jsfiddle.net/vcGrr/
Using Jquery it is simple enough:
$("select").focus(function(){
$("select option").filter(function() {
return $(this).text() == "2014";
}).prop('selected', true);
});
Thanks for pointing out that my fiddle did not match the code - correct fiddle is above
Did you mean..
<option value="2014" selected>2014</option>
Set id to your <select> tag
<select id="ddl">
At the end of document add javascipt
<script type="text/javascript">
var firstclick=0;
document.getElementById("ddl").onclick=function(){
if(firstclick==0){
document.getElementById("ddl").selectedIndex=11;
firstclick=1;
}
}
</script>
Here is a jQuery version: jsfiddle
Relevant HTML:
<select>
<option value="" disabled selected style="display:none"></option>
...
<option id="2014" value="2014">2014</option>
...
</select>
jQuery:
var oldValue = null;
$( function ()
{
$('select').click(function(){
var s = $(this);
val = s.val();
oldValue = val;
if( val == null )
{
document.getElementById("2014").selected = true;
}
});
});
Update
Slightly modified version that contains purely jQuery selectors is here: jsfiddle.
Only change is to set 2014 to selected:
$("#2014").prop('selected', true);
Put selected on the option you want by default to be shown as follows-
<select>
<option value=""></option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014" selected>2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
Fiddle
You can’t. Implementations of select element work so that initially the default value is shown. Moreover, if a value like “2014” were shown but the default value were actually empty, it would seriously mislead users. You should reconsider the original problem (the unspecified problem that made you want to achieve something that cannot be achieved).
The behavior you describe could be simulated using CSS and JavaScript, by constructing something that looks like a select element but has been coded entirely differently.