Using jquery.append() method

Using jquery.append() method - javascript

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>');

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');

creating auto select box using same id with jquery or javascript

I have four select box.If I choose one select box, I want to choose another three select box automatically.I could do it but it can't use same id .I want to use same id in other select box without changing id.How can I do that?Please help me.
Html
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
Jquery
$(document).ready(function(){
$('#select1').on('change' , function(){
var getVal = $(this).val();
$('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
$('#select2').on('change' , function(){
var getVal = $(this).val();
$('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
$('#select3').on('change' , function(){
var getVal = $(this).val();
$('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select4 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
$('#select4').on('change' , function(){
var getVal = $(this).val();
$('#select1 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select2 option[value="'+getVal+'"]').show().first().prop('selected' , true);
$('#select3 option[value="'+getVal+'"]').show().first().prop('selected' , true);
}).change();
});

It's way more simpler than you expected, setting the value to the select, will select the corresponding option, like this:
$(document).ready(function(){
$('#select1').on('change' , function(){
$('#select2').val($(this).val());
$('#select3').val($(this).val());
$('#select4').val($(this).val());
}).change();
$('#select2').on('change' , function(){
$('#select1').val($(this).val());
$('#select3').val($(this).val());
$('#select4').val($(this).val());
}).change();
$('#select3').on('change' , function(){
$('#select2').val($(this).val());
$('#select1').val($(this).val());
$('#select4').val($(this).val());
}).change();
$('#select4').on('change' , function(){
$('#select2').val($(this).val());
$('#select3').val($(this).val());
$('#select1').val($(this).val());
}).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>

Expanding on Marcelo Origoni's answer, you can also use the .siblings() function for selecting all other <select>s at once. Note that if there is any other elements on the same level, you might want to do .siblings('select') instead of just .siblings().
$(document).ready(function(){
$('#select1, #select2, #select3, #select4').on('change' , function(e){
$(this).siblings().val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="selectbox" name="select1" id="select1">
<option value="1">Business Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select2" id="select2">
<option value="1">Chinese</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select3" id="select3">
<option value="1">English Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
<select class="selectbox" name="select4" id="select4">
<option value="1">Korea Center</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>

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.

jquery- Adding <option> tag inside <select>

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']")

Develop Reference

JavaScript is the programming language of the Web.

Using jquery.append() method - javascript

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>');

Related

Remove select placeholder after selecting option

creating auto select box using same id with jquery or javascript

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

jquery .html() not getting latest selected value

jquery- Adding <option> tag inside <select>

Categories

Resources