Select2 can not select option - javascript

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>

Related

update select option element with Ajax result

i have two select option list with values retrieved from db .
<select id="userid" onchange="selSuj()">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
<script>
function selSuj(){
var x = $('#userid').val();
$.ajax({
type:'POST',
url:'same page url',
data:{
'userid':x
},
success: function(result){
document.getElementById("determineSubj").innerHTML = result;
}
})
;
}
the first select option(userid),when option selected, should populate the corresponding values in the second select option(subject), using the user option value(eg 1,2,3) as search p.key to the subject db.
I have tried using ajax, it worked out well on alert(result), but does not update the second select option values. please help.
A select should not contain a <div>.
As we can see from this brief demo, doing so makes the div inaccessible to JavaScript, because it doesn't consider it to be a valid part of the DOM:
document.addEventListener("DOMContentLoaded", function() {
console.log(document.getElementById("determineSubj"));
});
<select id="subject">
<div id="determineSubj">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</div>
</select>
In any case, even if it was valid, it's entirely unnecessary for your purpose. You can just update the HTML of the select element directly.
Change the HTML to:
<select id="subject">
<option value="1" selected="selected">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
</select>
And the "success" callback to:
success: function(result) {
document.getElementById("subject").innerHTML = result;
}
and there shouldn't be any problem.

How to select multiple options if check option from a different 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.

getting perticular listbox selected value using javascript

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>

Setting select option with javascript

I have the following select:
<select id="select_produckt" class="form-control">
<option id="select_default" selected="" value="0">Vælg produkt</option>
<option value="1">NP 89,-</option>
<option value="2">NN 89,-</option>
<option value="3">NP 99,-</option>
<option value="4">NN 99,-</option>
<option value="5">NP 119,-</option>
<option value="6">NN 119,-</option>
<option value="7">NP 139,-</option>
<option value="8">NN 139,-</option>
<option value="9">NP 169,-</option>
<option value="10">NN 169,-</option>
<option value="11">NP 239,-</option>
<option value="12">NN 239,-</option>
</select>
Now, I wish to simply set the value of the select with JavaScript (meaning that the options text will be shown).
I've tried the following:
$('#select_produckt').val(2)
This, however, just left the field blank.
Can anyone tell me what the problem is?
Update
$.ajax({
type: 'POST',
url: '/Excel_Data/getSale',
data: {
request: 'ajax',
row_id: id,
list_id: list_id
},
success: function (data) {
$('#product_selection').removeClass('hidden');
alert(parseInt(data))
$('#select_produckt').val(""+data)
}
});
Try this:
$('#select_produckt').find('option')[2].selected = true;
http://jsfiddle.net/qwJKV/

Javascript Conditional Fields (Zendesk Lotus)

I am trying to configure some javascript code to make a conditional field app in Zendesk Lotus. Below is the javascipt template and my current html. Could someone give me an example of how I would change the java template to suit my html? I would like to only show the second drop down form field (ticket_fields_21552756) when the option 'qa' is selected from the first drop down list (ticket_fields_21013678). Once someone shows me how to do this I will be able to do the rest myself :)
PS, the javascript must stay in the below format.
Thanks in advance for the help!
Javascript:
(function(){
var projectRequest = ['280865'],
otherHelpesk = ['279466'],
hideAll = [].concat(projectRequest, otherHelpesk),
moodFieldMap = {
cat:[].concat(projectRequest),
dog:[].concat(otherHelpesk),
dolphin: [].concat(projectRequest, otherHelpesk)
};
return {
appID: 'https://github.com/zendesk/widgets/tree/master/ConditionalFieldsApp',
defaultState: 'loading',
type2thing: '',
events: {
'app.activated': 'setValue',
'ticket.custom_field_21631456.changed': 'typeII'
}, //end events
typeII: function(){
this.hide(hideAll);
this.type2thing = this.ticket().customField('custom_field_21631456');
//console.log('control field value: ' + this.type2thing);
if (this.type2thing != null) {
this.show(moodFieldMap[this.type2thing]);
}
},
setValue: function() {
//console.log('activated', arguments);
this.typeII();
},
hide: function(fields){
fields.forEach(function(field) {
this.ticketFields('custom_field_' + field).hide();
}, this);
},
show: function(fields) {
fields.forEach(function(field) {
this.ticketFields('custom_field_' + field).show();
}, this);
}
};
}());
My HTML:
<select id="ticket_fields_21013678" name="ticket[fields][21013678]" tabindex="8"><option value="">-</option>
<option value="depreqaccount_management">Account Management</option>
<option value="ce_vp">CE/VP</option>
<option value="city_management">City Management</option>
<option value="city_planning">City Planning</option>
<option value="customer_service">Customer Service</option>
<option value="depreq_images">Images</option>
<option value="partner_management">Partner Management</option>
<option value="production">Production</option>
<option value="qa">QA</option>
<option value="senior_management">Senior Management</option>
<option value="depreq_writers">Writers</option>
<option value="depreq_bdm">BDM</option></select>
<select id="ticket_fields_21552756" name="ticket[fields][21552756]" tabindex="9"><option value="">-</option>
<option value="responsibility_account_manager">Account Manager</option>
<option value="responsibility_bdm">BDM</option>
<option value="responsibility_ce_vp">CE/VP</option>
<option value="responsibility_city_manager">City Manager</option>
<option value="responsibility_city_planner">City Planner</option>
<option value="responsibility_customer_service">Customer Service</option>
<option value="responsibility_image_designer">Images</option>
<option value="responsibility_merchant">Merchant</option>
<option value="responsibility_partner_manager">Partner Manager</option>
<option value="responsibility_producer">Producer</option>
<option value="responsibility_qa">QA</option>
<option value="responsibility_writer">Writer</option></select>
You can see the latest version of the new Zendesk agent interface at https://github.com/zendesklabs/conditional_fields_app

Categories