Develop Reference

How to check if select element changed after close? [duplicate]

I would like to make a jQuery check if a select field was changed. If it changes, set an alert message (has changed), if returned to default, set another alert message (default value).
$('select').on('change',function () {
var isDirty = false;
$('select').each(function () {
var $e = $(this);
if (!$e[0].options[$e[0].selectedIndex].defaultSelected) {
isDirty = true;
}
});
if(isDirty == true) {
alert("has changed");
} else {
alert("default value");
}
});
Please advise if this is the proper way.

You don't need inner each loop. Plus $(this)[0] can be optimised to just this:
$('select').on('change', function () {
var isDirty = !this.options[this.selectedIndex].defaultSelected;
if (isDirty) {
alert("has changed");
} else {
alert("default value");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="">
<option value="1">Label 1</option>
<option value="2" selected>Label 2</option>
<option value="3">Label 3</option>
<option value="4">Label 4</option>
</select>

I would do something like:
HTML:
<select data-default="one" id="the-select">
<option>one</option>
<option>two</option>
</select>
Javascript:
$('#the-select').change(function() {
var changed = $(this).val() != $(this).data('default');
alert(changed ? 'changed' : 'not changed');
});

select anyone optgroup at the same time in custom javascript

Fiddle Link
I have two types of optgroup with option.
I need to validate between two groups. How to do that ?
Case 1
If i select the A optgroup.simuultanseuly i cant able to select optgroup B
i need to select any one. can't select both at the same time.
Javascript
$('#select').change(function () {
var selectedOption = $('#select option:selected');
var label = selectedOption.closest('optgroup').attr('label');
var selectText = selectedOption.text();
if(label == 'A'){ $('.selectoption').val(label); }
var length = $(this).find(':selected').text().length;
$('')
if(label== 'A'){
alert('check');
} else {
alert('no test');
}
// if (length < 2) {
//$(this).find(':selected').text(label + ' - ' + selectText);
//}
});

You can use element.prop('disabled', boolean) to disable / enable the form elements.
You can disable the other optgroup using the above technique like this:
$(function(){
$('#select').change(function () {
$('optgroup').prop('disabled', false);
$('optgroup').removeClass('selected');
var selectedOption = $('#select option:selected');
$(".selectoption").val(selectedOption.closest('optgroup').attr('label'));
selectedOption.closest('optgroup').addClass('selected');
var label = selectedOption.closest('optgroup').attr('label');
var selectText = selectedOption.text();
$(this).find('optgroup').each(function(i) {
if(!$(this).hasClass('selected')) {
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" multiple style="height:150px;width:150px;">
<optgroup label="A">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</optgroup>
<optgroup label="B">
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</optgroup>
</select>
<input type="text" name="selectoption" class="selectoption" value="" />

Event listener inside a function

I have a select on my page:
<select id='cat'>
<option value='a'>A</option>
<option value='b'>B</option>
<option value='all'>all</option>
</select>
With a javascript function that handles which options have to be displayed:
function funcName(aList) {
// populates the options for the select tag
$("#cat").on("change", function(){
// some computation;
});
// uses aList to update some div data
}
What I'm trying to do is if the selected option is all, I have to display everything in aList, otherwise based on the selected option I have to display only the related options. Is my usage of onchange event correct?
Initially I thought of making aList global, but after some reading on globals in JS, I got to know it is not a very good practice.
Thanks in advance!
UPDATE: aList contains some string values.

$(function () {
$("#ddl").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
var assignedRoleId = new Array();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
if(selectedValue== "all")
{
$("#ddl option").each(function()
{
if(this.value=="all")
{
assignedRoleId.push();
}
else
{
assignedRoleId.push(this.value);
assignedRoleId.push(" ");
$("#selected").html(assignedRoleId);
}
});
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Select something:
<select id="ddl">
<option value="">select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="all">all</option>
</select>
<div id="selected">
</div>

append option to multiple select boxes

I wanted to add an option to multiple select boxes but some how I am not able to do this, below is my code snippet. please help me to solve this problem.
<select name="selBx-1" id="selBx-1" class="sel-opt">
<option value="general">General</option>
<option value="special">Special</option>
<option value="addnew">Add New</option>
</select>
<select name="selBx-2" id="selBx-2" class="sel-opt">
<option value="general">General</option>
<option value="special">Special</option>
<option value="addnew">Add New</option>
</select>
<script type="text/javascript">
$(document).ready(function(e) {
$(document).on("change",".sel-opt",function(){
var selVal = $(this).val();
if(selVal == 'addnew')
{
$(".sel-opt option:last").before("<option value='newoption'>New Option</option>");
}
})
});
</script>

I can't tell if this is the exact functionality you're looking for, but hope it helps.
$(document).ready(function(e) {
$(".sel-opt").on("change", function(){
if($(this).val() === "addnew"){
$(".sel-opt").find("option:last").before("<option value='newoption'>New Option</option>");
}
});
});

$(document).ready(function(e) {
$('select').change(function(){
var selVal = $(this).val();
if(selVal == 'addnew')
{
$(".sel-opt").each(function() {
$(this).children('option').filter(':last').before(new Option("New Option", "newoption"));
});
}
})
});
JSFIDDLE DEMO

Set class of div with value of selected option in list

Using jquery, I need to set the class of a div using a select list.
For instance:
<select name="id[3]" id="id[3]">
<option value="11">- Please Select -</option>
<option value="16">Something</option>
<option value="15">Something else</option>
<option value="13">Etc...</option>
</select>
And this is the div that needs the class to be updated:
<div id="textpreview" class="textpreview"></div>
I have tried this code but I'm afraid my understanding of jquery is lacking:
$('#id\\[3\\]').change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
if (str==16){
$("#textpreview").attr('class', 'sixteen');
}
})
.trigger('change');
Any ideas?

I think you want to do what I have in this jsfiddle. The code goes like this:
$('#id\\[3\\]').change(function () {
if ($(this).val() === "16"){
$("#textpreview").addClass('sixteen');
} else
{
$("#textpreview").removeClass('sixteen');
}
}).trigger('change');

var $textpreview = $("#textpreview");
$('#id\\[3\\]').change(function() {
var val = $(this).val();
if (val == 16)
$textpreview.addClass('sixteen');
else
$textpreview.removeClass('sixteen');
});