Develop Reference

How to make "select option" select option for quantity using jQuery

I have a select option for a quantity that I want to make it hide and show depending on the value. Quantities are from 1 to 4, when the option value is "more" the select element will hide then the input name="quantity-input" will show up so you can type manually quantity you like from 1 to 50.
<input type="number" name="quantity-input" id="qty-input" hidden>
<select name="quantity-select" id="qty-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>

i'm using jquery to make selectors easier. let me know at the comment section if something doesn't work as you want.
$('.QuantSelect_').change(function(){
const QuantSelect_ = $(this);
const QuanMoreIn_ = QuantSelect_.parent().find('.QuanMoreIn_').eq(0);
const switchInput = QuantSelect_.parent().find('.switchInput_').eq(0);
let selected_ = QuantSelect_.val();
if( selected_ === 'more' ){
QuantSelect_.hide();
QuanMoreIn_.show().focus();
switchInput.show().click(function(){
QuantSelect_.toggle(); QuanMoreIn_.toggle();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="QuanForm">
<input class="QuanMoreIn_" type="number" name="quantity-input" placeholder="Enter the specific Number" style="display:none;" />
<select class="QuantSelect_" name="quantity-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
<button class="switchInput_" style="display:none;">switch</button>
</div>

You need an event-listener on select field which will mark the field hidden/disabled when More option is selected and make your input field visible.
document.getElementById('qty-select').addEventListener('change', event => {
const currentValue = event.currentTarget.value;
if (currentValue == 'more') {
event.currentTarget.setAttribute('disabled', true);
document.getElementById('qty-input').removeAttribute('hidden');
}
});

Please update html like below.
<input type="number" name="quantity-input" id="qty-input" hidden min="1" max="50">
<select name="quantity-select" id="qty-select" onclick="hideMe();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="more">more</option>
</select>
And add javascript function.
function hideMe() {
var selectBox = document.getElementById("qty-select");
if(selectBox.options[selectBox.selectedIndex].value == "more") {
document.getElementById("qty-select").style.display="none";
document.getElementById("qty-input").removeAttribute('hidden');
}
}

How to disable and enable SelectBox's options depending on a SelectBox's value?

I have 3 SelectBoxes.
Their names are, lets say "a","b","c".
And the options for all SelectBoxes are "1","2","3".
If i choose "1" in first SelectBox, "1" will be disabled for other two SelectBoxes.
But in first SelectBox if i choose "2" after choosing "1" , I see "1" and "2" both are disabled for other SelectBoxes.. How can I solve it by using DOM?
Here is the code I wrote:
var source = document.getElementsByName("a")[0];
document.getElementsByName("b")[0].options[source.value].setAttribute("disabled","disabled")
This code makes first Select Box's value disabled for the SelectBox named "b".
And I dont want to write code like this. I want to have it as an array, and use Loop.
var target=["a","b","c"]
for (int i=0; i<target.length; i++){
document.getElementsByName(target[i])[0].options[source.value].setAttribute("disabled","disabled");
}
But what if i want to change the value for first SelectBox, how to enable other value, and disable this new value for other Select Boxes?

You can first enable all the options when the value changes and then disable only the ones with matching values.
const a = document.querySelector('select.a');
function disable() {
document.querySelectorAll('select:not(.a) > option[disabled]').forEach(x => x.disabled = false);
document.querySelectorAll(`select:not(.a) > option[value="${a.value}"]`).forEach(x => x.disabled = true);
}
disable();
a.addEventListener('change', disable);
<select class="a">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="b">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="c">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Select Option dropdown taking time to close specifically in Chrome

I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br><br><br>
<select class="select two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance

fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});

You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.

querySelectAll Not Selecting Proper Elements

I have a dropdown menu with a really long ID, but part of it is _Country. I have a text box with a really long ID, but part of it is _State.
I'm trying to take the value from the dropdown Country and put it into the textbox State anytime someone selects an option in the Country dropdown.
Here is the JavaScript I have now. It worked fine before I tried using the wildcard, but now it does not work.
<script type="text/javascript">
document.querySelectorAll('[id*="_Country"]').onchange = replicate;
function replicate() {
var tb1 = document.querySelectorAll('[id*="_Country"]');
var tb2 = document.querySelectorAll('[id*="_State"]');
tb2.value = tb1.value;
}
</script>

querySelectorAll() returns a NodeList. Use querySelector() to get just one node.
Here's a sample (fiddle):
<select id="test_Country">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="test_State">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
(function() {
var country = document.querySelector('[id*="_Country"]');
var state = document.querySelector('[id*="_State"]');
country.addEventListener("change", function(e) {
state.value = country.value;
});
})();
</script>

How to exclude items from a drop down based on another drop down

I have three identical drop downs. I want to select a value from drop1 and have that value excluded from drop2. Then the selections in drop3 should exclude 1 & 2. Any ideas?
<select name="drop1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="drop3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

You can use change event and remove selected elements from the dom
$('select[name=drop1]').change(function() {
var drop2 = $('select[name=drop2]').empty().hide();
var exclude = $(this).val();
var size = $(this).children().length;
for (var i=0; i<size; ++i) {
if (i != exclude) {
drop2.append('<option value="' + i + '">' + i + '</option>';
}
}
});
if you have more complex example and you need value based explude you can create a clone.
var clone = $('select[name=drop2]').clone();
$('select[name=drop1]').change(function() {
var copy = clone.clone();
copy.find('option[value=' + $(this).val() + ']').remove().end();
$('select[name=drop2]').replaceWith(copy);
});

Depending on how comfortable you are with PHP, or AJAX you have two solutions.
If you are more comfortable with PHP you could have a user submit the data from one select form and then using if statements like
if $value != '1'{
echo '<option value="1">1</option>';
}
and do that for each field in the second form; then replicate that for the third form.
The smoother looking solution would be using AJAX to use a listener to see when a user clicks a field a java value is set as that field and using a similar "if then show" method on the java-script variable to hide the fields that contain that value in the other forms.
Also one of the easiest solutions would be allowing multiple-selections (Assuming you are ok with the look of using one form & the values between the forms are the same like the example you gave above)... That example being:
<select id="my_num" name="my_num" size="5" multiple="multiple" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>