We Keep Coding

How to show only data-subtext matching with a selected option value - jQuery

I have a dropdown menu that looks like the following:
<select name="category" id="category">
<option value="category-1">category-1</option>
<option value="category-2">category-3</option>
<option value="category-3">category-2</option>
</select>
<select name="product" id="product">
<option data-subtext="category-1">product</option>
<option data-subtext="category-1">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-2">product</option>
<option data-subtext="category-3">product</option>
<option data-subtext="category-3">product</option>
</select>
how do I show only products matching data-subtext with its category value?

You need the hide and show it based on the selected value
$('select[name=category]').on('change', function (event) {
let selectedValue;
selectedValue = $(this).find('option:selected').text();
$('select[name=product] option').filter(function () {
if ($(this).attr('data-subtext') !== selectedValue) {
return true;
} else {
$(this).show();
this.selected = true;
}
}).hide()
});

How to hide\show specific value of option based on another selected option by JQuery?

I Have html select form like this:
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
In my case I need to make it so that if I choose "1" at the first select form (# id_num), then the next select form (#id_choices) should only show "car" and "bike" options, and if I choose "2", #id_choices should only show "house" and "money", and also the rest.. But if i select "all", then every options on #id_choices should be shown.
How to solve that condition by using jQuery?

You can use jQuery's $.inArray() to filter your options, and make them display: none; depending upon the occurence of the item in the array,
Please have a look on the code below:
$(function() {
$('#id_num').on('change', function(e) {
if ($(this).val() == 1) {
var arr = ['car', 'bike'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 2) {
var arr = ['house', 'money'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else if ($(this).val() == 3) {
var arr = ['plane', 'wife'];
$('#id_choices option').each(function(i) {
if ($.inArray($(this).attr('value'), arr) == -1) {
$(this).css('display', 'none');
} else {
$(this).css('display', 'inline-block');
}
});
} else {
$('#id_choices option').each(function(i) {
$(this).css('display', 'inline-block');
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option disabled selected>Select</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house' >house</option>
<option value='money' >money</option>
<option value='plane' >plane</option>
<option value='wife' >wife</option>
</select>
Hope this helps!

You can run a function once when the page loads and then every time #id_num changes, such that all the visible #id_choices options are removed (using remove()), and then only the relevant options are re-added to #id_choices (using append()) to replace them.
Working Example:
$(document).ready(function(){
var car = '<option value="car">car</option>';
var bike = '<option value="bike">bike</option>';
var house = '<option value="house">house</option>';
var money = '<option value="money">money</option>';
var plane = '<option value="plane">plane</option>';
var wife = '<option value="wife">wife</option>';
function options1() {
$('#id_choices').append(car);
$('#id_choices').append(bike);
}
function options2() {
$('#id_choices').append(house);
$('#id_choices').append(money);
}
function options3() {
$('#id_choices').append(plane);
$('#id_choices').append(wife);
}
function displayOptions() {
$('#id_choices option').remove();
switch ($('#id_num option:selected' ).text()) {
case('1') : options1(); break;
case('2') : options2(); break;
case('3') : options3(); break;
case('all') : options1(); options2(); options3(); break;
}
}
$('#id_num').change(function(){displayOptions();});
displayOptions();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>
For the sake of completeness, here is the same approach as above, but this time in native javascript, so you can compare and contrast with the jQuery above:
var numbers = document.getElementById('id_num');
var choices = document.getElementById('id_choices');
function displayOptions() {
var optionSet1 = ['car', 'bike'];
var optionSet2 = ['house', 'money'];
var optionSet3 = ['plane', 'wife'];
var oldOptions = choices.getElementsByTagName('option');
var selected = numbers.options[numbers.selectedIndex].text;
while (oldOptions.length > 0) {
choices.removeChild(oldOptions[0]);
}
switch (selected) {
case('1') : var optionSet = optionSet1; break;
case('2') : optionSet = optionSet2; break;
case('3') : optionSet = optionSet3; break;
case('all') : optionSet = optionSet1.concat(optionSet2).concat(optionSet3); break;
}
for (var i = 0; i < optionSet.length; i++) {
var option = document.createElement('option');
option.setAttribute('value',optionSet[i]);
option.textContent = optionSet[i];
choices.appendChild(option);
}
}
numbers.addEventListener('change',displayOptions,false);
window.addEventListener('load',displayOptions,false);
<label>Num:</label>
<select id="id_num">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value=''>all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car'>car</option>
<option value='bike'>bike</option>
<option value='house'>house</option>
<option value='money'>money</option>
<option value='plane'>plane</option>
<option value='wife'>wife</option>
</select>

Add the attribute display with a value of none using .prop() instead of using disabled attribute (like in Saumya's answer) in case you want them completely invisible instead of just disabled/grayed-out

there may be a better way, however this does work.. you can also add hide/display classes to any other elements
$(document).ready(function () { $('#id_num').on('change', change) });
function change() {
$('#id_choices > option').hide();
$($(this).find(':selected').attr('clssval')).show();
}
.sel{display:none;}
.num1{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Num:</label>
<select id="id_num">
<option value='1' clssval=".num1">1</option>
<option value='2' clssval=".num2">2</option>
<option value='3' clssval=".num3">3</option>
<option value='' clssval=".num1,.num2,.num3">all</option>
</select>
<label>Choices:</label>
<select id="id_choices">
<option value='car' class="sel num1">car</option>
<option value='bike' class="sel num1">bike</option>
<option value='house' class="sel num2">house</option>
<option value='money' class="sel num2">money</option>
<option value='plane' class="sel num3">plane</option>
<option value='wife' class="sel num3">wife</option>
</select>

Pass multiple select values to a function to update an image

I want to change an image depending on what two select values have been chosen. How would this be done dynamically with two separate select? Here's my code so far.
Html
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select onchange="twoselects(this)">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select onchange="twoselects(that)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>
Javascript
function twoselects(val, val2) {
// Not sure why you used this line
var image = document.querySelector(".prime").value;
var getValue = val.value;
var getValue2 = val2.value;
if (getValue == "opt1" && "option1") {
document.getElementById('optimus').style.backgroundImage= "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
}
else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage= "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}

You are sending one argument but accepting 2..i would suggest you not to send and accept any. Select elements using getElementById or querySelector
that in provided example is undefined.
function twoselects() {
var size1 = document.querySelector("#size1");
var size2 = document.querySelector("#size2");
var getValue = size1.value;
var getValue2 = size2.value;
if (getValue == "opt1" && getValue2 == "option1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();
p {
width: 100%;
height: 200px;
}
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select id='size1' onchange="twoselects()">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select id='size2' onchange="twoselects()">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>

Change color of option in select element

I am trying to change the color of the selected option in a select element while it's in the drop down and while it's displayed in main window. So far I have been able to change the color of all the options.
<select id="drop-down" onchange="colorChange(event);">
<option value="">--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
This is the function I'm using.
var one = "one";
var two = "two";
var three = "three";
var four = "four";
function colorChange(event){
if(event.target.value == one){
event.target.style.color = "#67D986";
} else if (event.target.value == two || three || four){
event.target.style.color = "#f00";
} else{
alert("There has been an error!!!");
}
};

There is problem in your else if in OR condition, to add conditions in OR use following
} else if (event.target.value == two || event.target.value == three || event.target.value == four) {
var colors = {
one: '#67D986',
two: '#f00',
three: '#f00',
four: '#f00'
};
$('#drop-down').on('change', function(e) {
var value = $('option:selected').val();
$('option').css('color', '#000');
if (!value) {
alert("There has been an error!!!");
} else {
$('option:selected').css('color', colors[value]);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="drop-down">
<option value="">--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>

Do it in jquery way if you like:
$(document).ready(function(){
$("#drop-down").on("change",function(){
var selectedVal = $(this).val();
switch(selectedVal)
{
case "one": $(this).css("color","red")
break;
case "two": $(this).css("color","blue");
break;
}
});
});
Html
<select id="drop-down" >
<option value="">--</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>

hi i think you can achieve this even by css only here i is that check out
select{
margin:40px;
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
select option {
margin:40px;
background: rgba(0,0,0,0.3);
color:#fff;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
select option[val="one"]{
background: #67D986;
}
select option[val="two"],select option[val="three"],select option[val="four"]{
background: #f00;
}
<select id="drop-down">
<option val="">-----------------</option>
<option val="one">One</option>
<option val="two">Two</option>
<option val="three">Three</option>
<option val="four">Four</option>
</select>
Check By only CSS

Nested Hide, show javascript not working

I have html code like this,
<select id="select1">
<option value="1">..<option>
..
</select>
<div id="select2" style="display:none;"></div>
<div id="select3" style="display:none;"></div>
If one option is selected, it displays corresponding div. Code I used is
$("#select1").change(function() {
if($(this).val() == 1) {
$("#select2").show();
} else {
$("#select2").hide();
}
if($(this).val() == 2) {
$("#select3").show();
} else {
$("#select3").hide();
}
if($(this).val() == 3) {
$("#select4").show();
} else {
$("#select4").hide();
}
});
If one div is displayed, I again used the same script for another select which shows/hides a textarea.
<div id="select2">
<select id="select4"></select>
<textarea id="select5" style="display:none;"></textarea>
<script>
$("#select4").change(function() {
if($(this).val() == 1) {
$("#select5").show();
} else {
$("#select5").hide();
}
});
</script>
But that textarea is not displaying.

Well, the HTML you show has no option elements in the select, so the select will have no value.
If the HTML is actually different, you should edit your question.

try this, hope it does what you are expecting :
$("#select1").change(function() {
if ($(this).val() == 1) {
$("#select2").show();
} else {
$("#select2").hide();
}
if ($(this).val() == 2) {
$("#select3").show();
} else {
$("#select3").hide();
}
});
$("#select4").change(function() {
if ($(this).val() == 1) {
$("#select5").show();
} else {
$("#select5").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select1">
<option value="1">1
</option>
<option value="2">2
</option>
<option value="3">3
</option>
</select>
<div id="select3" style="display:none;">div2</div>
<div id="select2" style="display:none;">
<select id="select4">
<option value="1">1
</option>
<option value="2">2
</option>
</select>
<textarea id="select5" style="display:none;"></textarea>
</div>