I have html listbox as, which has same name but different id
<select name="dept" id="vrow" >
<option selected="selected" > - Select Department- </option>
<option value="GEN">computer </option>
<option value="SC">mac </option>
<option value="ST">civ </option>
<option value="OBC">ele </option>
</select>
i had atteched it to each row fetched from database,
how can i get ID if i change perticular listbox value.
If you need id then use:
document.getElementById('vrow').addEventListener('change', function(e) {
if (e.target.name==='dept') {
alert(e.target.id);
}
})
Working Demo
If you need value then use:
document.getElementById('vrow').addEventListener('change', function(e){
if (e.target.name==='dept') {
alert(e.target.value);
}
})
Working Demo
You Write Javascript Function or Jquery function
like this
<select onchange="dept(this.value)" name="dept" id="vrow" >
<option selected="selected" > - Select Department- </option>
<option value="GEN">computer </option>
<option value="SC">mac </option>
<option value="ST">civ </option>
<option value="OBC">ele </option>
</select>
<script type="text/javascript">
function dept(id){
$.ajax({
url: 'ajax.php',
data: { id: id} ,
success: function (response) {
try{
alert(response);
}
catch(e){
alert("Error"+e);
}
},
error: function (e) {
alert("error"+e); or alert("error"+JSON.stringify(e));
}
});
}
</script>
Ajax.php
You can add event listener on change event to parent node of all <select> elements it can ul if they are in list or even body.
<script type="text/javascript">
document.getElementByTagName('UL').addEventListener('change', function(e) {
if (e.target.name==='dept') {
//In this case you have got element that you need and its id
//e.target.id
alert(e.target.id);
}
});
</script>
Related
I have two select elements. One for manufacturer and one for model. The manufacturer select element will update the model select element on change via ajax. The function I have works well, but I'd like to add in functionality to change the model select element back to it's default value (Select model...) and disable the model select if the primary manufacturer select element is set back to its default original value (Select manufacturer...).
Manufacturer select (primary)
<select name="inputManufacturer" id="inputManufacturer" class="form-control">
<option selected>Select manufacturer...</option>
<option value="1">Apple</option>
</select>
Model select (secondary, updates via ajax)
<select name="inputModel" id="inputModel" class="form-control" disabled>
<option>Select model...</option>
</select>
jQuery function
$(document).ready(function ()
{
$('select[name="inputManufacturer"]').on('change',function(){
$('select[name="inputModel"]').prop('disabled', false);
var man_ID = $(this).val();
if(man_ID)
{
$.ajax({
url : 'add/' +man_ID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
$('select[name="inputModel"]').empty();
$.each(data, function(key,value){
$('select[name="inputModel"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}
else
{
$('select[name="inputModel"]').empty();
}
});
});
Give the default options value="0"
Then you can use $('select[name="inputModel"]').html('<option value="0">Select model...</option>'); instead of empty. And disable it after that.
$(document).ready(function ()
{
$('select[name="inputManufacturer"]').on('change',function(){
$('select[name="inputModel"]').prop('disabled', false);
var man_ID = $(this).val();
if(man_ID > 0)
{
$('select[name="inputModel"]').append('<option value="1">Option1</option>');
$('select[name="inputModel"]').append('<option value="2">Option2</option>');
}
else
{
$('select[name="inputModel"]').html('<option value="0">Select model...</option>');
$('select[name="inputModel"]').prop('disabled', true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="inputManufacturer" id="inputManufacturer" class="form-control">
<option value="0" selected>Select manufacturer...</option>
<option value="1">Apple</option>
</select>
<select name="inputModel" id="inputModel" class="form-control" disabled>
<option value="0">Select model...</option>
</select>
I am using select2 4.0.6 in my java project. use JSON API for source data. Its shown dropdown items but can not select single item by typing. But selecting by mouse its works fine.
Here is my JSFiddle link
And my sample code as follows-
function loadMedicines(manufacturerId) {
$("[id $= '.medicine']").select2({
ajax: {
url: url+'?id='+manufacturerId,
dataType: 'json',
processResults: function (jsonData) {
return {
results: $.map(jsonData.data, function (item) {
return {
id: item.id,
text: item.brandName
}
})
};
}
}
});
}
<label>Manufacturer</label>
<select id="manufacturer" name="manufacturer" onchange="loadMedicines(this.value);">
<option value="0">Please Select</option>
<option value="2">ACI</option>
<option value="1">Beximco</option>
<option value="3">Square</option>
</select>
<label>Medicines</label>
<select id="lists0.medicine" name="lists[0].medicine" class="reqDetMed">
<option value="">Please Select</option>
</select>
<select id="lists1.medicine" name="lists[1].medicine" class="reqDetMed">
<option value="">Please Select</option>
</select>
I want select multiple option from second select depending on check option from first select.
For example:
adiunkt -> mikroklimat, RTG
agent celny -> zapylenie
First select:
<select name="form[stanowisko][]" id="stanowisko">
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
Second select:
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat">mikroklimat</option>
<option value="RTG">RTG</option>
<option value="zapylenie">zapylenie</option>
</select>
I tried this but it not working (select all options after first check):
function tes(){
if (document.getElementById('stanowisko').value ="agent celny") {
document.getElementById('czynniki_szkodliwe').options[2].selected = true;
document.getElementById('czynniki_szkodliwe').options[0].selected = true;
}
if ( document.getElementById('stanowisko').value="adiunkt") {
document.getElementById('czynniki_szkodliwe').options[1].selected = true;
}
}
Pure js solution.
let elem1 = document.getElementById('stanowisko'),
elem2 = document.getElementById('czynniki_szkodliwe');
elem1.addEventListener('change', (e) => {
Array.from(elem2.children).forEach(v => {
return v.disabled = v.getAttribute('data-attr') !== e.target.value;
})
});
<select name="form[stanowisko][]" id="stanowisko">
<option value="">-</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option value="mikroklimat" disabled data-attr='adiunkt'>mikroklimat</option>
<option value="RTG" disabled data-attr='adiunkt'>RTG</option>
<option value="zapylenie" disabled data-attr='agent celny'>zapylenie</option>
</select>
You should use a data attribute to mark the options linked to the first select like this:
$(document).ready(function(){
$("#stanowisko").on("change", function(event){
var $options = $("#czynniki_szkodliwe option");
//Unselect all
$options.prop("selected", false);
var val = $("#stanowisko").val();
$options.each(function(idx, item) {
if($(item).data("stanowisko").indexOf(val) >= 0) {
$(item).prop("selected", true);
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="form[stanowisko][]" id="stanowisko">
<option value="">Choose</option>
<option value="adiunkt">adiunkt</option>
<option value="agent celny">agent celny</option>
<option vlaue="lekarz">lekarz</option>
</select>
<select multiple="multiple" name="form[czynniki_szkodliwe][]" id="czynniki_szkodliwe">
<option data-stanowisko='["adiunkt"]' value="mikroklimat">mikroklimat</option>
<option data-stanowisko='["adiunkt","lekarz"]' value="RTG">RTG</option>
<option data-stanowisko='["agent celny"]' value="zapylenie">zapylenie</option>
</select>
Edit: If several options, from the first select, refers to the same options in the second select, you can "store" an array in the data attribute in JSON format.
I updated the JS code to handle JSON array in the data attributes instead of a simple string.
I have a multi select control look like below,
When user select "Any", I want to deselect all other selected values and select only "Any", means, if user select "Any", do not allow to select other values else allow to select other values.
How its possible through jQuery
Thanks...
jQuery("#select").change(function() {
if (jQuery("#select option:first").is(':selected')) {
jQuery("#select").val("any");
}
});
To the form below:
<select multiple id="select">
<option value="any">Any</option>
<option value="...">...</option>
...
</select>
I think you want something like this:
$("select").on("change", function () {
var selOption = $("option:selected", this).val();
if (selOption == "any") {
$(this).attr("selected", false);
$(this).val("any");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select2" multiple="multiple">
<option value="any">Any</option>
<option value="12">twelve</option>
<option value="13">thirette</option>
<option value="14">fourteen</option>
<option value="15">fifteen</option>
<option value="16">sixteen</option>
<option value="17">seventeen</option>
<option value="18">eighteen</option>
<option value="19">nineteen</option>
<option value="20">twenty</option>
</select>
In most cases this should work
$('.my-select').val('any')
Where is ’any' is a value of Any option.
(function() {
var mSelect;
mSelect = $('select');
mSelect.on('click', function(event) {
var values, needReset;
values = mSelect.val();
needReset = event.target.value === 'any' ||
(values.length > 1 && values.indexOf('any') !== -1);
if (needReset) {
mSelect.val('any');
}
});
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple>
<option value="any">Any</option>
<option value="divorced">Maried</option>
<option value="unmarried">Unmarried</option>
</select>
I want to build a drop down menu that the second selection will be displayed if the first selection data belongs to a specific category.
As you can see below, the first selection will be about COUNTRIES. If the country selected has states, then a second drop down selection will be displayed, containing the states of that country.
1)Is there a tag (in my code "xyz") that i can use it to separate the countries in "state" and "no-state" categories? If there is, how can i read the value of the "xyz" tag?
2) If i use the:
<option class="no-state" value="Germany">Germany</option>
and then use the jQuery to read it it will give me the value GermanySpain (which is correct but not what i want)
$('.no-state').val();
HTML PART
<div id="country">
<select>
<option xyz="no-state" value="Germany">Germany</option>
<option xyz="state" value="USA">USA</option>
<option xyz="no-state" value="Spain">Spain</option>
</select>
</div>
<div id="state" style="display:none" >
<select>
<option value="Utah">Utah</option>
<option value="New York">New York</option>
<option value="California">California</option>
</select>
</div>
JQUERY PART
$(document).ready(function(){
$('#country').change(function() {
if (the value of "xyz" tag is === 'no-state')
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
What can i do to address this issue?
Thanks.
Added a variable to keep if a country has states or not according your custom attribute xyz
js
$(document).ready(function(){
$('#country').change(function() {
var hasStates = $(this).find("option:selected").attr("xyz");
if (hasStates == 'no-state')
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
fiddle
I think you can make use of .data() jQuery method, which reads the data-* a valid html5 attribute, but you have to change your markup to fix and use this script:
$('#country select').change(function() {
if ($(this).find('option:selected').data('xyz') === 'no-state') {
$('div#state').hide();
} else {
$('div#state').show();
}
});
You have to add a data-* prefix to get to it and make it a valid html5 attribute.
<select>
<option data-xyz="no-state" value="Germany">Germany</option>
<option data-xyz="state" value="USA">USA</option>
<option data-xyz="no-state" value="Spain">Spain</option>
</select>
Using the class attribute isn't that bad:
HTML
<select>
<option class="no-state" value="Germany">Germany</option>
<option class="state" value="USA">USA</option>
<option class="no-state" value="Spain">Spain</option>
</select>
JavaScript
$(document).ready(function(){
$('#country').change(function() {
var $sel = $(this).find("option:selected");
if ($sel.hasClass("no-state"))
{
$('div#state').hide();
}
else
{
$('div#state').show();
}
});
});
Fiddle
First of all I would change your html structure to:
<select id="country">
<option xyz="no-state" value="Germany">Germany</option>
<option xyz="state" value="USA">USA</option>
<option xyz="no-state" value="Spain">Spain</option>
</select>
<select id="state" style="display: none;">
<option value="Utah">Utah</option>
<option value="New York">New York</option>
<option value="California">California</option>
</select>
Then you can simply do:
$("#country").change(function() {
var hasState = $(this).find(':selected').attr('xyz') === "state";
$("#state").toggle(hasState);
});
Here is a fiddle to see it in action.