I need to reset the value of a dropdown list with a radio button. So when a certain radio button is selected, it will reset a specific dropdown list to the default selected="selected" option.
How can this be done with js and css?
This should reset your dropdown to the first option.
Here's the markup
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input onclick="resetFoo();" type="radio" name="bar" value="bar">
Here's the jQuery.
function doSomething {
$("#foo option:first").attr("selected", true);
}
Say that this is the code for your first element
<select id=foo>
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
your radio button should be something like this:
<input onclick="document.getElementById('foo').value = '';" type="radio" name="bar" value="bar">
The value under the onclick event needs to be replaced with the default value for your dropdown.
document.getElementById('select').selectedIndex = 0;
<input type="radio" onchange="doSomething()" />
Related
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');
}
}
I have 2 select boxes where first is all user selectable but in second selected option is dependant on first select box. Selected value in first option box matches option's class in second select box but values are different. I imagine i need something like:
$('#territory').change(function() {
if($(this).val() == 'EU')
{
$('#territory2').class('EU');
}
How do i select selected option by class name? (There might be more than 1 option with the same class name but it just needs to select any of them).
<select id="territory" name="territory"">
<option value="EU">A</option>
<option value="GB">B</option>
<option value="ALL">C</option>
</select>
<select id="territory2" name="territory2">
<option value="1" class="EU">A</option>
<option value="2" class="GB">B</option>
<option value="3" class="ALL">C</option>
<option value="4" class="ALL">D</option>
</select>
Set the value attribute of the desired <option> element on the value attribute of the <select>:
const territory = document.getElementById("territory"),
territory2 = document.getElementById("territory2");
territory.addEventListener("input", ev => {
territory2.querySelector("."+territory.value).selected = true;
});
<select id="territory" name="territory">
<option value="EU">A</option>
<option value="GB">B</option>
<option value="ALL">C</option>
</select>
<select id="territory2" name="territory2">
<option value="1" class="EU">A</option>
<option value="2" class="GB">B</option>
<option value="3" class="ALL">C</option>
<option value="4" class="ALL">D</option>
</select>
Note that this will only select the first option with that class.
I recommend data-attribute:
$('#territory').on("change", function() {
const territory = $("option:selected", this).data("territory");
$("#territory2").val(territory)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="territory" name="territory">
<option value="" data-territory="0">Please select</option>
<option value="EU" data-territory="1">A</option>
<option value="GB" data-territory="2">B</option>
<option value="ALL" data-territory="3">C</option>
</select>
<select id="territory2" name="territory2">
<option value="0">Please select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I need help on something really simple.
I have 2 dropdown boxes on a form:
<select name="OfficeLocation" >
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
The second one is "Read Only"
All I need to know is how can I change the value of "OfficePhone" by changing the value of "OfficeLocation"? using either a simple JavaScript or JSP Command
Thanks
You are able to use a script like the following:
<script>
menu1 = document.getElementsByName('OfficeLocation')[0];
menu2 = document.getElementsByName('OfficePhone')[0];
menu1.onchange = function(){
menu2.value = menu1.value;
}
</script>
Here you are using the onchange event to initiate a function that make the value on the second menu menu2 equals to the selected value of the first menu menu1.
An online demo is here
Notice that: the script should be placed after your elements.
You gonna need an event handler function for the OfficeLocation select and an id for the second select.
<select name="OfficeLocation" onchange="eHandler">
<option value="" ></option>
<option value="1" selected="selected">New York</option>
<option value="2" >Los Angeles</option>
<option value="3" >San Francisco</option>
</select>
<select name="OfficePhone" id="oPhone">
<option value="" ></option>
<option value="1">(718)555-1212</option>
<option value="2" >(213)555-1212</option>
<option value="3" >(415)555-1214</option>
</select>
You have to implement your event handler in your script, like this:
function eHandler(){
var secondSelect = document.getElementById('oPhone');
secondSelect.value = //the value you want to be selected
}
I have select box and two (2) textboxes.
I want the value of select box that displays on the first textbox and whatever the value of the first textbox it display also in the second box.
select box = first textbox
first textbox = second textbox
Buy the way my first textbox is readonly so there is no way to trigger the input, keyup, keydown event. I want my two (2) textbox the same value every time.
I have the html code.
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">
I want the value of select box that displays on the first textbox and
whatever the value of the first textbox it display also in the second
box.
select box = first textbox first textbox = second textbox
Try utilizing selector $("#selectbox, :text:not([readonly])") ; input , change event ; .val() to set both input type="text" values
$("#selectbox, :text:not([readonly])").on("input change", function(e) {
$(":text").val(this.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox type="text">
First change:
<input id="second-textbox type="text">
To:
<input id="second-textbox" type="text">
Then use the following to accomplish your goal:
$('#selectbox, #second-textbox').on('change input', function() {
var sel = $(this).is('#selectbox') ? '#first-textbox' : '#first-textbox,#second-textbox';
$( sel ).val( this.value );
})
.filter('#selectbox').change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly>
<input id="second-textbox" type="text">
Solution 1 (best fits my eyes)
HTML
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
$('#selectbox').on('change', function() {
$("#first-textbox").val($(this).val());
$("#second-textbox").val($(this).val());
});
fiddle here
Solution 2 (Best fits the question):
$('#selectbox').on('change', function() {
$("#first-textbox").val($(this).val()).trigger('keyup');
});
$('#first-textbox').on('keyup', function() {
$("#second-textbox").val($(this).val());
});
fiddle here
You can set the text on change:
$(function() {
var tbs = $('input[id$=-textbox]'); //cache all
$('#selectbox').on('change', function(e) {
tbs.val(this.value); //set text box value
}).trigger('change'); // force value on page load
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="selectbox">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input id="first-textbox" type="text" readonly='' />
<input id="second-textbox" type="text" />
I built upon #Rafael Topasi's solution posted in the comment above in his jsFiddle. All I did was add the functionality that you outlined in your question, which was to disable the first text input field and make it so that second input field is equal to the first input field when the select option changes.
jsFiddle Example
//StackOverflow Solution: http://stackoverflow.com/questions/32238975/two-textbox-same-value-in-jquery
//Disable Input: http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery
//Source: http://jsfiddle.net/nafnR/727/ by Rafael Topasi
//08-26-2015
$(document).ready(function() {
$("input#first-textbox").prop('disabled', true);
//$("input").prop('disabled', false);
$("#selectbox option").filter(function() {
return $(this).val() == $("#first-textbox").val();
}).attr('selected', true);
$("#selectbox").on("propertychange change", function() {
$("#first-textbox").val($(this).find("option:selected").attr("value"));
$("#second-textbox").val($(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="selectbox" name="name">
<option value="">Please select...</option>
<option value="Elvis">Elvis</option>
<option value="Frank">Frank</option>
<option value="Jim">Jim</option>
</select>
<input type="text" id="first-textbox" name="firstname" value="Elvis" oninput="document.getElementById('second-textbox').value=this.value">
<input id="second-textbox" type="text" name="firstname" value="">
Here is what I've started to do: http://jsfiddle.net/nd9ny/
For now it doesn't work as I want it to.
I want to update options each time when a new select input is added or an input is removed.
For example, we have our first select input with these options:
<select>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
</select>
When I add new input to my page, I want my function to update all the inputs and to remove the newly selected option from them.
<select>
<option value="1" selected></option>
<option value="3"></option> // The second one is removed
<option value="4"></option>
</select>
<select>
<option value="2" selected></option> // The first one is removed
<option value="3"></option>
<option value="4"></option>
</select>
And then, If I remove the first input, the second one becomes:
<select>
<option value="1"></option>
<option value="2" selected></option>
<option value="3"></option>
<option value="4"></option>
</select>
Pure Javascript code needed.
You may try the following solution:
- CSS:
.hidden {
display: none;
}
- JS function:
function hide_selected(el) {
var index = el.selectedIndex;
// Show every options
for(var i=0; i<el.length; i++)
el[i].className="";
// Hide the selected one
el[index].className="hidden";
}
- HTML example:
<body>
<select onchange="javascript:hide_selected(this);">
<option value="1" class="hidden" selected="selected">1</option>
<option value="2" class="">2</option>
<option value="3" class="">3</option>
<option value="4" class="">4</option>
</select>
</body>
Note: This function was tested with Firefox, you may have to check if this works with other browsers.
Hope this helps