I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help
I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});
Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});
Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())
Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/
And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Related
How to display the text fields when choosing different option from the selectoption (if select USA option USA text field need to show)?
<select name="cntry">
<option value="us">USA</option>
<option value="uk">uk</option>
</select >
<input type="text" value="USA" name="USA">
<input type="text" value="UK" name="UK">
$('#country').on('change', function() {
$('input').each(function() {
$(this).css('display', 'none');
});
if (this.value === 'us') {
$('input[name="USA"]').css('display', 'initial')
}
if (this.value === 'uk') {
$('input[name="UK"]').css('display', 'initial')
}
});
input {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="country" name="cntry">
<option selected disabled hidden>Select your Country</option>
<option value="us">USA</option>
<option value="uk">uk</option>
</select>
<input type="text" value="USA" name="USA">
<input type="text" value="UK" name="UK">
First of all,
when I select a value from select tag. Change the input value of the checkbox.
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
});
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
How can I change the name of cat-2 to the chosen value of cat-1
For example;
if I choose value1 ( its value=100)
I want to change the name of cat-2 to cat-100
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>
Just continue my script from your other question
window.addEventListener("load", function() { // on page load
document.getElementById("myselectbox1").addEventListener("change", function() {
document.getElementById("mycheckbox1").value = this.value;
const sel2 = document.getElementById("myselectbox2");
if (sel2 && this.value) sel2.name="c-"+this.value;
});
// check to see the change
document.getElementById("mycheckbox1").addEventListener("change", function() {
console.log(this.value);
});
// select to see the change
document.getElementById("myselectbox2").addEventListener("change", function() {
console.log(this.name,this.value)
})
});
<input type="checkbox" name="id" value="" id="mycheckbox1">
<select name="cat-1" id="myselectbox1">
<option value="">Choose</option>
<option value="100">Value1</option>
<option value="200">Value2</option>
</select>
<select name="cat-2" id="myselectbox2">
<option value="">Choose</option>
<option value="300">Value3</option>
<option value="400">Value4</option>
</select>
I am relatively new to JavaScript and I am stuck on this last little bit.
I have a set of three drop-downs. The first one is displayed automatically, the 2nd have you select an option in the first. Once you select an option in the 2nd, a 3rd and final drop-down is displayed. A selection here displays a total price and an 'add to cart' button.
The hiccup is... if the user decides to change their selection in the first drop-down, I remove the third, price, and add to cart. However, once I re-select an item in the 2nd drop-down, I can no longer get the third to display.
I have attached my code below, and I believe after stepping through in DevTools, the problem lies here:
document.getElementById("show_SizeSelections").style.display = 'block';
I have tried various methods, but I cannot get the show_sizeSelections to display anything.
Thanks
$(document).ready(function() {
var $style = $('select[name=style]'),
$finish = $('select[name=finish]'),
$size = $('select[name=size]');
$style.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $finish.find('option.' + rel);
if ($set.size() < 0) {
$finish.hide();
return;
}
$finish.show().find('option').hide();
$set.show().first().prop('selected', true);
});
$finish.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $size.find('option.' + rel);
if ($set.size() < 0) {
$size.hide();
return;
}
$size.show().find('option').hide();
$set.show().first().prop('selected', true);
});
});
var print_Name = 'Test Image',
Luster = 'Luster',
Metallic = 'Metallic',
print_Style,
abbrv_Finish,
print_Size,
print_Price,
_toCart,
finish_Counter = 0,
size_Counter = 0;
//stores Print Style selection
function showStyle(element) {
print_Style = element.options[element.selectedIndex].text;
if (finish_Counter > 0) {
document.getElementById('show_Size').innerHTML = '';
document.getElementById('print_Cost').innerHTML = '';
document.getElementById('cart_Button').innerHTML = '';
document.getElementById('show_SizeSelections').innerHTML = '';
} else {
document.getElementById("show_Finish").innerHTML = '<h4>2. Select a Finish</h4>';
}
finish_Counter++;
}
//stores Print Finish selection
function showFinish(element) {
var finish_Style = element.options[element.selectedIndex].text;
if (finish_Style == Luster) {
abbrv_Finish = 'L';
} else if (finish_Style == Metallic) {
abbrv_Finish = 'M';
}
if (size_Counter > 0) {
document.getElementById('print_Cost').innerHTML = '';
document.getElementById('cart_Button').innerHTML = '';
document.getElementById("show_Size").innerHTML = '<h4>3. Select a Size</h4>';
document.getElementById("show_SizeSelections").style.display = 'block';
} else {
document.getElementById("show_Size").innerHTML = '<h4>3. Select a Size</h4>';
}
size_Counter++;
}
//stores Print Size and Price selection
function showSize(element) {
var szpr_Selection = element.options[element.selectedIndex].text;
var szpr_Split = szpr_Selection.split(" ");
print_Size = szpr_Split[0];
print_Price = szpr_Split[1].replace('$', '');
//if Price exists, display it and Add2Cart
var image = document.getElementById("button");
if (print_Price != undefined) {
document.getElementById("print_Cost").innerHTML = '<h4>' + ' Total: $' + print_Price + '</h4>';
//add items for onClick event
_toCart = print_Name + '_' + print_Style + '_' + abbrv_Finish + '_' + print_Size + '_' + print_Price;
document.getElementById('cart_Button').innerHTML = "<div class='show-image thumbnail'><a style='text-decoration:none;' onclick='alert(" + _toCart + ")'>Add To Cart</a></div>";
//image.style.display = 'block';
}
}
.finish {
display: none;
}
.size {
display: none;
}
.button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h4>1. Select a Style</h4>
<br />
<div class="selected_Dropdowns">
<select name="style" onChange="showStyle(this);">
<option value="0">- Select a Style -</option>
<option value="0" rel="print">Print</option>
<option value="0" rel="matted_print">Matted Print</option>
<option value="0" rel="canvas">Canvas</option>
<option value="0" rel="framed_plaque">Framed Plaque</option>
</select>
<br />
<div id="show_Finish"></div>
<select name="finish" class="finish" onchange="showFinish(this);">
<option value="1" class="print">- Select a Finish -</option>
<option value="1" rel="p_l_size" class="print">Luster</option>
<option value="1" rel="p_m_size" class="print">Metallic</option>
<option value="1" class="matted_print">- Select a Finish -</option>
<option value="1" rel="mp_l_size" class="matted_print">Luster</option>
<option value="1" rel="mp_m_size" class="matted_print">Metallic</option>
<option value="1" class="canvas">- Select a Finish -</option>
<option value="1" rel="cvs_l_size" class="canvas">Luster</option>
<option value="1" rel="cvs_m_size" class="canvas">Metallic</option>
<option value="1" class="framed_plaque">- Select a Finish -</option>
<option value="1" rel="fp_m_size" class="framed_plaque">Metallic</option>
</select>
<br /><br />
<div id="show_Size"></div>
<div id="show_SizeSelections">
<select name="size" class="size" onchange="showSize(this);">
<option value="2" class="p_l_size">- Select a Size -</option>
<option value="2" class="p_l_size">8x12 $60</option>
<option value="2" class="p_l_size">12x18 $90</option>
<option value="2" class="p_l_size">16x24 $120</option>
<option value="2" class="p_l_size">20x30 $150</option>
<option value="2" class="p_l_size">24x36 $180</option>
<option value="2" class="p_m_size">- Select a Size -</option>
<option value="2" class="p_m_size">8x12 $70</option>
<option value="2" class="p_m_size">12x18 $105</option>
<option value="2" class="p_m_size">16x24 $140</option>
<option value="2" class="p_m_size">20x30 $180</option>
<option value="2" class="p_m_size">24x36 $220</option>
<option value="2" class="mp_l_size">- Select a Size -</option>
<option value="2" class="mp_l_size">8x12 $85</option>
<option value="2" class="mp_l_size">12x18 $135</option>
<option value="2" class="mp_l_size">16x24 $175</option>
<option value="2" class="mp_l_size">20x30 $225</option>
<option value="2" class="mp_l_size">24x36 $275</option>
<option value="2" class="mp_m_size">- Select a Size -</option>
<option value="2" class="mp_m_size">8x12 $95</option>
<option value="2" class="mp_m_size">12x18 $150</option>
<option value="2" class="mp_m_size">16x24 $195</option>
<option value="2" class="mp_m_size">20x30 $255</option>
<option value="2" class="mp_m_size">24x36 $315</option>
<option value="2" class="cvs_l_size">- Select a Size -</option>
<option value="2" class="cvs_l_size">8x12 $100</option>
<option value="2" class="cvs_l_size">12x18 $150</option>
<option value="2" class="cvs_l_size">16x24 $250</option>
<option value="2" class="cvs_l_size">20x30 $375</option>
<option value="2" class="cvs_l_size">24x36 $500</option>
<option value="2" class="cvs_m_size">- Select a Size -</option>
<option value="2" class="cvs_m_size">8x12 $125</option>
<option value="2" class="cvs_m_size">12x18 $180</option>
<option value="2" class="cvs_m_size">16x24 $280</option>
<option value="2" class="cvs_m_size">20x30 $425</option>
<option value="2" class="cvs_m_size">24x36 $550</option>
<option value="2" class="fp_m_size">- Select a Size -</option>
<option value="2" class="fp_m_size">12x18 $425</option>
<option value="2" class="fp_m_size">16x24 $525</option>
<option value="2" class="fp_m_size">20x30 $650</option>
<option value="2" class="fp_m_size">24x36 $800</option>
</select>
</div>
</div>
<br /><br />
<div id="print_Cost"></div>
<div id="cart_Button"></div>
<br /><br /><br />
<button id="button" class="button" onClick="_add2Cart()">Add to Cart</button>
<div id="show_SizeSelections">
<select name="size" class="size" onchange="showSize(this);">
You're setting style.display for the above div.
document.getElementById("show_SizeSelections").style.display = 'block';
But what you hid earlier was the select element inside it.
if ($set.size() < 0) {
$size.hide();
You could use
document.getElementById("show_SizeSelections").children[0].style.display = 'block';
...or even just $size[0].style.display = 'block'; since you already defined that collection.
There is a 3-stage category list.
Main Category
Sub Category
Child Category
Main category and subcategory are working but can not display child category. Additionally, the "choose " option does not appear in the subcategories If the relevant category is selected.
Where am I making a mistake?
$(document).ready(function() {
var $cat = $('select[name=categoMain]'),
$items = $('select[name=categoSubMain]');
$items2 = $('select[name=categoChildMain]');
$cat.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);
/* Child category */
$items.change(function() {
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items2.find('option.' + rel);
if ($set.size() < 0) {
$items2.hide();
return;
}
$items2.show().find('option').hide();
$set.show().first().prop('selected', true);
});
/* */
});
});
.cate {
display: none;
}
.cate2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoMain">
<option value="0" class="">Choose</option>
<option value="1" rel="accessories">Cellphones</option>
<option value="2" rel="sports">Sports</option>
<option value="2" rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
<option value="0" class="">Choose</option>
<option value="3" class="accessories">Smartphone</option>
<option value="8" class="accessories">Charger</option>
<option value="1" class="sports">Basketball</option>
<option value="4" class="cars">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
<option value="0" class="">Choose</option>
<option value="3" class="accessories">Smartphone</option>
<option value="1" class="sports">Basketball</option>
</select>
JSFiddle Version
Changed your code a bit. It does what you wanted but now you are facing another problem - what if you have one option? Give me time, i will come up with something
$(document).ready(function () {
var selectedData = {}
$('select[name="categoMain"], select[name="categoSubMain"],select[name="categoChildMain"]').change(function () {
var $this = $(this).find(':selected');
selectedData[$(this).attr('name')]=$this.val()
var rel = $this.data('rel');
$(this).next('select').show()
.find('option').hide()
.end().find('option[data-rel="' + rel+'"]').show()
.first().prop('selected', true);
$(this).next('select').next('select').hide()
console.log(selectedData);
});
});
.cate {
display: none;
}
.cate2 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="categoMain">
<option value="0" data-rel="">Choose</option>
<option value="1" data-rel="accessories">Cellphones</option>
<option value="2" data-rel="sports">Sports</option>
<option value="2" data-rel="cars">Cars</option>
</select>
<select name="categoSubMain" class="cate">
<option value="0" data-rel="">Choose</option>
<option value="3" data-rel="accessories">Smartphone</option>
<option value="8" data-rel="accessories">Charger</option>
<option value="1" data-rel="sports">Basketball</option>
<option value="4" data-rel="cars">Tesla</option>
</select>
<select name="categoChildMain" class="cate2">
<option value="0" data-rel="">Choose</option>
<option value="3" data-rel="accessories">Smartphone</option>
<option value="1" data-rel="sports">Basketball</option>
</select>
how can i check if all select options are disabled except for the one with the value="0"?
Here is my code:
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
What I was thinking was:
if(#my-select options disabled except for option value="0") {
console.log(option value="0" is the only one that is enabled);
}
1st: You need to check for all enabled options by using $('#my-select option:not(:disabled)')
2nd: check How many of it is enabled using .length
3rd: check if its value attribute is 0
var enabled = $('#my-select option:not(:disabled)');
if(enabled.length === 1 && enabled.attr('value') == "0") {
console.log('option value="0" is the only one that is enabled');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>
you can use javascript or jQuery.I use of jQuery, Like this:
$(document).ready(function(){
var counter = 0;
$('#my-select option:enabled:not([value=0])').each(function(){
counter++;
})
if(counter < 1)
alert('option value="0" is the only one that is enabled');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select name="my-select" id="my-select">
<option value="0">apple</option>
<option value="1" disabled>orage</option>
<option value="2" disabled>pear</option>
<option value="3" disabled>banana</option>
</select>