I have a series of selects that I unfortunately have to inject an option called 'please select' into as the first option. I then want to make the 'please select' in all selects on the page, selected. As I can't change the HTML, this is my only choice.
However, my code seems to be only making the first select's 'please select' selected.
HTML:
<select name="" id="" class="cartDdlOptions">
<option value="1">Some Value</option>
<option value="2">Some Value</option>
<option value="3">Some Value</option>
<option value="4">Some Value</option>
</select>
<select name="" id="" class="cartDdlOptions">
<option value="1">Some Value</option>
<option value="2">Some Value</option>
<option value="3">Some Value</option>
<option value="4">Some Value</option>
</select>
<select name="" id="" class="cartDdlOptions">
<option value="1">Some Value</option>
<option value="2">Some Value</option>
<option value="3">Some Value</option>
<option value="4">Some Value</option>
</select>
jQuery:
$(window).load(function(){
$('.cartDdlOptions').prepend('<option value="" selected>Please Select</option>');
var selectOperator = $(".cartDdlOptions option").eq(0);
$(".cartDdlOptions").each(function(){
if (selectOperator.val() == ""){
console.log(selectOperator);
selectOperator.attr("selected", true);
}
});
});
Working example.
Really can't work this one out. Help would be appreciated.
You can do it that with just two lines instead of writing much code this way:
$(".cartDdlOptions").each(function(){
$(this).prepend('<option value="0" selected>Please Select</option>'); //add please select option
$(this).val("0") // set it as selected
});
If you don't want to set value attribute then you can do as #T.J Cowder pointed:
$(".cartDdlOptions").each(function () {
$(this).prepend('<option value="" selected>Please Select</option>'); //add please select option
$(this).val("") // set it as selected
});
EXAMPLE:
http://jsfiddle.net/cqrs2g8w/
Related
I want to delete the first option of the selected and I have selected tag id and class but the problem is selected class and id is changing when I open the form of different-2 event.and class "r" of selected tag is using more than one time different-3 drop down of form.
I want to remove the selected option using title attribute of selected tag.
If any other way to resolved this type of problem please share.
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
I want to delete
<option value="">Select One </option>
Here is how to select using class and title in plain JavaScript
window.onload=function() {
var sel = document.querySelector("select.r[title='State*']");
console.log(sel);
sel.options[0]=null;
}
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
Ditto in jQuery
$(function() {
var $options = $("select.r[title='State*'] option");
$options.eq(0).remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option>Please select State</option>
<option>option 1</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="NotState*">
<option>Please select Not State</option>
<option>option 1</option>
</select>
you can add the hidden attribute:
<option value="" hidden>Select One</option>
this will result in being the default selected value but you can't select it in the dropdown
Example:
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="" hidden>Select One</option>
<option value="Michigan">Michigan</option>
<option value="Alabama">Alabama</option>
<option value="Alaska">Alaska</option>
<option value="Arizona">Arizona</option>
<option value="Arkansas">Arkansas</option>
<option value="California">California</option>
<option value="Colorado">Colorado</option>
<option value="Connecticut">Connecticut</option>
<option value="Delaware">Delaware</option>
<option value="Florida">Florida</option>
<option value="Georgia">Georgia</option>
</select>
The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.).
The hidden attribute is new in HTML5.
Source: http://www.w3schools.com/tags/att_global_hidden.asp
In your scenario if select box's id is changing dynamically then you can achieve this with it's class name like below
$(".r option[value='']").each(function() {
$(this).remove();
});
If you want to delete it by using ID then you can do it like this..
$("#DROPDOWN_735 option[value='']").each(function() {
$(this).remove();
});
Or
$("select option[value='']").each(function() {
$(this).remove();
});
Try this
$(document).ready(function() {
$("select[title='State*'] option:first-child[value='']").remove();
})
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
<select name="DROPDOWN_735" class="r" id="DROPDOWN_735" title="State*">
<option value="">Select One </option>
<option value="Michigan"> Michigan</option>
<option value="Alabama"> Alabama</option>
<option value="Alaska"> Alaska</option>
<option value="Arizona"> Arizona</option>
<option value="Arkansas"> Arkansas</option>
<option value="California"> California</option>
<option value="Colorado"> Colorado</option>
<option value="Connecticut"> Connecticut</option>
<option value="Delaware"> Delaware</option>
<option value="Florida"> Florida</option>
<option value="Georgia"> Georgia</option>
</select>
Hope it will be useful.
I have the following drop-down menu:
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
></select>
</form>
What I need is when the user changes the selected option in one filed (i.e. on change event), the placeholder to be displayed on the other and vice-versa.
For example, lets say that the user had already selected orange in #my-fruits. Now, when the user changes the selection from dog to cat in #my-animals:
the placeholder "Select a fruit" to be displayed automatically on #my-fruits field, and
then, the <option value="orange"> have its "selected" attribute removed
Ira, try this:
$('#my-fruits')
.add('#my-animals')
.on('change', function () {
$(this).siblings().prop('selectedIndex', 0);
});
Also, remove unnecessary arrow in this line:
></select>
Good luck ;)
$('select').change(function() {
$(this).siblings('select').prop('selectedIndex', 0);
console.log($('option:selected', this).val())
console.log($(this).siblings('select').val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form action="...">
<select name="fruits" id="my-fruits">
<option value="" disabled selected>Select a fruit</option>
<option value="apple">apple</option>
<option value="orange">orange</option>
<option value="peach">peach</option>
</select>
<select name="animals" id="my-animals">
<option value="" disabled selected>Select an animal</option>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="iguana">iguana</option>
</select>
</form>
Just set the selected option of sibling select to first index
Try
$('#animals').change(function() {
$('#fruits').val("");
});
When textbox has any value then how to automatically drop-down option will selected?
For Example :
This is my drop down
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
This is text box :
<input type="text" name="color" id="color" />
Question
If any type value is fill in text box, how to select automatically Green in drop down.
You could attach input event to the input to track the user change on input then if so select the option you want, check example bellow.
Hope this helps.
$('#color').on('input', function() {
if($(this).val()!="")
$('#colors').val("others");
else
$('#colors').val("0");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colors">
<option value="0">pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>
<input type="text" name="color" id="color">
If you're using plain JavaScript, you can try this
<select id="selection">
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">Green</option>
</select>
<input type="text" id="color" oninput="myFunction()">
<script>
function myFunction() {
document.getElementById("selection").value ='others';
}
</script>
Note: I haven't added the code to handle reseting the selection in case there's no text in the textbox
I need to show the submit button on many forms on the same page only if one option from a select is selected.
I have:
<form id="1">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
and
<form id="2">
<input type="text">
<select>
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit">
</form>
so, I need to show the submit button only if an option of the select is selected
Thanks!!!
This a working example with you html http://jsfiddle.net/g188o5eg/
$('select').on('change', function(){
if($(this).val() != ''){
$(this).parent().find('input[type="submit"]').show();
} else {
$(this).parent().find('input[type="submit"]').hide();
}
});
It will work with all forms on your site :)
Try something like this (would work with multiple select boxes (uses the nearest submit):
<form>
<input type="text">
<select class="select">
<option value="">Select one value</option>
<option value="1">value 1</option>
<option value="2">value 2</option>
</select>
<input type="submit" class="submitbutton">
<script type="text/javascript">
$('.submitbutton').hide();
$('.select').click(function() {
$(this).closest('.submitbutton').show();
});
</script>
I am trying to create a main drop down box which control multiple drop down box. This multiple drop down box created in loop so i need dynamic script which works on class or id.
example -
<form method="post" name="postage">
Select All
<select id="options1" name="se1" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
Select Manually-
<select id="options2" name="se2" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se3" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<select id="options3" name="se4" >
<option value="0" >-- Select --</option>
<option value="Royal Mail">Royal mail</option>
<option value="USP courier">USP courier</option>
<option value="Standard courier">Standard courier</option>
<option value="DHL courier">DHL courier</option>
</select>
<input type="submit" name="submit_result" />
</form>
I found one script but i don't know where to change -
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$('.west-yorkshire').change(function({
var value = $(this).val();
$('.className').each(function(
$(this).val(value);
alert(value);
));
}));
}//]]>
</script>
Is this what you were trying to achieve ? http://jsfiddle.net/9R9DV/2/
Changed some JS code
$(document).ready(function(){
$('#options1').change(function(){
var value = $(this).val();
$('.manual').each(function(){
$(this).val(value);
});
});
});
and classes to HTML code
<select class="manual" id="options2" name="se2" >
...
<select class="manual" id="options3" name="se3" >
...
etc.