jquery- Adding <option> tag inside <select>

jquery- Adding <option> tag inside <select> - javascript

I have a drop down list like
<select name="select">
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
I want to add one extra <option> tag at the top like
<select name="select">
<option value="value1" disabled selected>Value 1</option>
<option value="value2">Value 2</option>
<option value="value3">Value 3</option>
</select>
How can i do it with jquery.

$(
'<option></option>',
{value:"newvalue",text:"new option"}
).attr({
disabled:"disabled",
selected:"selected"
}).prependTo("select[name='select']")

Related

Remove select placeholder after selecting option

After selecting option from list hide placeholder (Select option). If after clicked on select box placeholder must be hidden.
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

You could do it like this:
$("select").change(function() {
$(this).find("option:first").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="name">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>

you can set a js-handler, to remove the Option-noe (here the jQuery Version):
<select class="name" id="myselect">
<option value="">Select Option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
and the js
jQuery(function(){
jQuery ('#myselect').on('change', function(){
jQuery(this).find('[value=""]').remove();
})
});
https://jsfiddle.net/k08zj6r9/
if you wish, you can disable the node, instead of remove.
jQuery(this).find('[value=""]').attr('disabled','disabled');

How to delete the selected option using title attribute of select tag

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.

How can I reset multiple dropdowns in jquery mobile with custom class at once

I have this code which resets all the dropdowns when dropdown1 changes.
<select id="name" >
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name2" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name3" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name4" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name5" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
<select id="name6" class="whatever">
<option value="">select all</option>
<option value="1">Text 1</option>
<option value="2">Text 2</option>
<option value="3">Text 3</option>
</select>
I wanted to select the class and reset all of them at once but the only way to do it is with: $('select').val('').selectmenu('refresh');
But what if I want to specify a custom class name like in this case "whatever". How can I do it?
This is my jsfiddle

Working fiddle.
You have just to add it after select :
$('#name').change(function(){
$('select.whatever').val('').selectmenu('refresh');
});
Hope this helps.

jquery .html() not getting latest selected value

jquery .html() not getting latest selected value, code here
<div id="testDiv">
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
</div>
and script
$(document).ready(function(){
$('#mySel').val('3');
var divContent = $('#testDiv').html();
alert(divContent);
});
getting an output like this
<select id="mySel">
<option value="1">opt 1</option>
<option selected value="2">opt 2</option>
<option value="3">opt 3</option>
<option value="4">opt 4</option>
</select>
'selected' not getting changed, i need output like this
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option selected value="3">opt 3</option>
<option value="4">opt 4</option>
</select>

$(document).ready(function(){
$('#mySel').val('4');
$("#mySel").find('option').removeAttr("selected");
$("#mySel option[value='4']").attr("selected","selected");
var divContent = $('#testDiv').html();
alert(divContent);
});
Output:
<select id="mySel">
<option value="1">opt 1</option>
<option value="2">opt 2</option>
<option value="3">opt 3</option>
<option selected="selected" value="4">opt 4</option>
</select>

For your desired output you will need to add a script to move the selected attribute to the correct <option> when the user changes the value. By default the select list will not modify your markup based on the user's actions.

Using jquery.append() method

What's wrong in my code that the append method dont work? I do get the alert but the actual method that will append is not working. Please see the code below:
jQuery(document).ready(function()
{
if (!document.getElementById('my_options').value)
{
alert('here');
jQuery('#my_options').append('<span id="option_id_error" class="errors">Error</span>');
}
});
HTML:
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<br/>
<select id="my_options2" name="my_options2">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<br/>
<select id="my_options3" name="my_options3">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
The select in the form is dynamically generated. If none is selected on the dropdown box, it will display the span error message. So my expected result is this:
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select> <span>Error</span>
I don't need to add something on the options.

What you are doing is not correct as a SPAN item is not valid within an SELECT item.
If you try to add a new option for example it will work
$('#my_options').append('<option value="5">item</option>');
what you can do is to wrap the select item inside a DIV as showed below
<div id="option1">
<select id="my_options" name="my_options">
<option value="">--Select--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
</div>
than you can do:
$('#option1').append('<span id="option_id_error" class="errors">Error</span>');
you can see it working at the below link
http://jsfiddle.net/LGkWp/

if you need to add this <span> element just next to <select> you may use .after(..) method:
jQuery('#my_options').after('<span id="option_id_error" class="errors">Error</span>');

Develop Reference

JavaScript is the programming language of the Web.

jquery- Adding <option> tag inside <select> - javascript

$( '<option></option>', {value:"newvalue",text:"new option"} ).attr({ disabled:"disabled", selected:"selected" }).prependTo("select[name='select']")

Related

Remove select placeholder after selecting option

How to delete the selected option using title attribute of select tag

How can I reset multiple dropdowns in jquery mobile with custom class at once

jquery .html() not getting latest selected value

Using jquery.append() method

Categories

Resources