Develop Reference

Need to detect whether jQuery is triggered in normal or multiselect combobox

I have some jQuery code that allows me to select multiple entries in a multiselect combobox without the need to press the Ctrl key.
This works, but interferes with a normal select box, which can now not be changed with the mouse.
The original jQuery code is:
(function ($) {
$(document).ready(function () {
$("option").mousedown(function(e) {
this.selected = ! this.selected;
e.preventDefault();
return false;
});
});
})(jQuery);
Of course, the $("option") selector applies to the normal select box as well, which is why it fails.
I tried to detect whether the event is triggered by a select box with the "multiple" attribute, but couldn't figure out how. The following doesn't work for various reasons, one of them being that the event is triggered by the option, not the select:
(function ($) {
$(document).ready(function () {
$("option").mousedown(function(e) {
if($(this).attr('multiple','multiple')) {
this.selected = ! this.selected;
e.preventDefault();
return false;
}
else {
return true;
}
});
});
})(jQuery);
Any ideas of how this could be done?
Ah, I don't want to include the ID of the multiselect, because the same code is also used by another multiselect in my real-world case.
Here is a fiddle:
https://jsfiddle.net/mheumann/3zn76mex/

Give all the multiselect elements to which you want to apply this behavior a new CSS class -- perhaps custom-multiselect.
Then you can use a compound selector like .custom-multiselect option in the code you have...
(function ($) {
$(document).ready(function () {
$(".custom-multiselect option").mousedown(function(e) {
this.selected = ! this.selected;
e.preventDefault();
return false;
});
});
})(jQuery);

You can target the options of every multi-select using this selector: $('select[multiple] option').
This selector targets every <option> that occurs within a <select> with the multiple attribute present.

Execute a jquery function onchange of ddslick option

I need to execute a jquery function on change of options in ddslick dropdown...
$("select[name=ddslick_select]").change(function(){
alert("changed");
});
I am using the name of the select to get the value changed event. So that on change of the value of that name will be recognised. But, I couldn't execute the function.

Note that ddslick also provides its own callbacks:
$('input[name=ddslick_select]').ddslick({
// other options...
onSelected: function(data){
alert("changed");
}
});

The select changes, the option does not -
$('.classOfTheSelectElement').on('change', function(){
alert($(this).val());
});
see if this alerts your selected options value

User select instead of input for dropdown:
$("select[name='ddslick_select']").change(function(){
alert("changed");
});
or simply use name attribute:
$("[name='ddslick_select']").change(function(){
alert("changed");
});

ddSlick implements a Callback for that
$("#myDiv").ddslick({
data: ddData,
defaultSelectedIndex: 3,
onSelected: function (data) {
alert("change");
}
});

This solution
$("select.ddslick").each(function() {
$(this).ddslick({
onSelected: function(data){
console.log(data.selectedData.value);
}
});
});

Jquery change the value of dropdown from a dropdown change

I'm trying to change the value of two dropdown lists when a third one changes, to that dropdown's new value:
<script>
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
</script>
Nothing happens.

Try this for starters, work your way when you get this to work :)
$(document).ready(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val(this.value);
$('select[name="d3"]').val(this.value);
});
});

Try like this
$(function() {
$('select[name="d1"]').change(function() {
$('select[name="d2"]').val($(this).val());
$('select[name="d2"]').html($(this).val());
});
});

how can i set tokeninput parameter on condition as dynamic

I am using tokeninput jquery for autocomplete with asp.net.
http://loopj.com/jquery-tokeninput/
i have one textbox and searching parameter is conditional. this jquery is render on loadtime. there is a checkbox, if checkbox is checked searching parameter wouldbe change and if checkbox is unchecked searching parameter is default parameter. i have called this on ready state.the issue is that when checkbox is checked searching parameter not changed. it search on only one condition as default condition.On ckeckbox click IsPastClass change as true or false.
$(document).ready(function() {
$("#txtStudentTokenSearch").tokenInput("../Handlers/TestAutoCompleteHandler.ashx?SearchType=Patient&IsPastClass=false", {
theme: "facebook",
tokenDelimiter: "|",
preventDuplicates: true,
onAdd: function(item) { removeTokenDuplicate('#txtStudentTokenSearch', item); btnLoadStudent.Focus(); }
});
});
Can any one tell me how can i set tokeninput parameter on condition.
Thanks.

Try
$(document).ready(function() {
$('.checkbox').change(function(){
var IsPastClass = this.checked;
$("#txtStudentTokenSearch").tokenInput("clear");
$("#txtStudentTokenSearch").tokenInput("../Handlers/TestAutoCompleteHandler.ashx?SearchType=Patient&IsPastClass="+IsPastClass , {
theme: "facebook",
tokenDelimiter: "|",
preventDuplicates: true,
onAdd: function(item) { removeTokenDuplicate('#txtStudentTokenSearch', item); btnLoadStudent.Focus(); }
});
});
$('.checkbox').trigger('change');
});
Hope it helps.

you can use tokenInput with ajax and handler very easly
you can download example from github
https://github.com/yanivsuzana/jquery-tokeninput-ajax-asp.net-vb

Populate textbox based on selected radio button

I have 3 radio buttons, when one of them is selected I want to automatically put text in a textbox.
For example, If the user selected the 'TBA' radio button, I want the text 'To Be Advised' put in the textbox, and if they select another radio button I want it to be cleared.
Can anyone help me??
http://jsfiddle.net/ej2hf/1/
Thanks in advance!

This should do:
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val($(this).val());
});
Live demo: http://jsfiddle.net/ej2hf/2/

Try this then
http://jsfiddle.net/ipsjolly/KNct8/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val($(this).val());
}
else
{
$('input[type="text"]').val('');
}
});
​
OR
http://jsfiddle.net/ipsjolly/KNct8/1/
$('input[name="dest_type"]').on('change', function() {
if($(this).val() == "tba"){
$('input[type="text"]').val('To Be Advised');
}
else
{
$('input[type="text"]').val('');
}
});​

In addition to populate the textbox with the value which is selected by default on page load use the below code:
$(document).ready(function(){
$('input[type="text"]').val($('input[name="dest_type"]').val());
$('input[name="dest_type"]').on('change', function() {
$('input[type="text"]').val ($(this).val()); });
});

Assuming that you are or can use the latest jQuery, you can use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val($(this).val());
});
});
See the Fiddle!
If what you need if to toggle the value of TBA, use this:
$(function() {
$('input[name="dest_type"]').on("change", function() {
$('input[type="text"]').val( (($(this).val()=='tba')?($(this).val()):('')) );
});
});
See this Fiddle!
If none of this is what you are trying to do, please rephrase the question or add some more information!

try this,
$(document).ready(function () {
$('input:radio[name="dest_type"]').change(function () {
$("input:text").val($(this).val());
});
})