Jquery comboboxes, selection in code

Question

I have two jquery comboboxes populated with various options:

<select id="project">
    <option value="1">This is project 1</option>
    <option value="2">This is project 2</option>
</select>
<select id="tasks">
     <option value="1">This is task 1</option>
     <option value="2">This is task 2</option>
</select>

I haven't shown all the html that the comobobox script adds which includes text boxes. The problem is when I make a selection from the first combo I want to script a selection in the 2nd comobobox, but for some reason I can't get the selection to show.

I would create a jsfiddle to demostrate the problem but I don't know how to link resources.

I've tried setting the selectedIndex member or calling the val() method, no luck.

Unfortunately not, I am using the jquery combobox, calling the "val" method with a value in any of the options does not cause the input text box to update. — SPlatten, Dec 23 '15 at 18:58
I want the selections to show the text associated with the values set. — SPlatten, Dec 23 '15 at 18:58
you need the related text to be show in the second compobox right ? see the answers — Alaa M. Jaddou, Dec 23 '15 at 19:01
[check this](https://jqueryui.com/autocomplete/#combobox) please — Alaa M. Jaddou, Dec 23 '15 at 19:21
[See This](http://elegantcode.com/2009/07/01/jquery-playing-with-select-dropdownlistcombobox/) it could help you — Alaa M. Jaddou, Dec 23 '15 at 20:15
Thats great for a normal drop down list, but not for a combobox. — SPlatten, Dec 23 '15 at 20:18
[see this](https://github.com/adamcoulombe/jquery.customSelect/issues/22) — Alaa M. Jaddou, Dec 23 '15 at 20:36
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98854/discussion-between-alaa-m-jaddou-and-splatten). — Alaa M. Jaddou, Dec 23 '15 at 20:37

Alaa M. Jaddou · Answer 1 · 2015-12-23T19:31:22.470

1

i think this is what you need

let's say you need to change task value to be like project value

$('#project').change(function() {
    $('#tasks').val('here_is_the_related_second_value');
});

UPDATE 1

could you try this:

$("#project").combobox({ 
    select: function (event, ui) { 
        $('#tasks').val('here_is_the_related_second_value');
    } 
});

See This

edited Dec 23 '15 at 19:31

answered Dec 23 '15 at 18:56

Alaa M. Jaddou

1,180
1
11
30

Sorry no that doesn't work, and using the combobox I do not get the change event. – SPlatten Dec 23 '15 at 19:14
@SPlatten can you explaine what exactly the functionality will be ? i mean you need to type into a combobox and when typing change the value is that what you need ? – Alaa M. Jaddou Dec 23 '15 at 19:16
What i want to do is make a selection from the first combo, then according to the selection lookup the task from an internal object and set the task, updating the second combo to display the task. – SPlatten Dec 23 '15 at 19:22
@SPlatten could you please give me how the object look like so i can make a solution please – Alaa M. Jaddou Dec 23 '15 at 19:24
Yes, thats what I'm doing and it works for the first combo, however my problem is that I have a second combo and I want to set the value in the second combo when the first is changed. – SPlatten Dec 23 '15 at 19:24
@SPlatten Please could you see the update of my answer – Alaa M. Jaddou Dec 23 '15 at 19:32
If I knew my way around jsFiddle better I would post a link with a demo to show off the problem, but I'm not sure how to link scripts on jsFiddle. Sorry, I just read your answer again, I will try and post when I have the result. – SPlatten Dec 23 '15 at 19:39
Unforunately whilst this might set the selected element, the – SPlatten Dec 23 '15 at 19:47
1

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/98852/discussion-between-alaa-m-jaddou-and-splatten). – Alaa M. Jaddou Dec 23 '15 at 19:52

score 1 · Answer 2 · answered Dec 23 '15 at 18:59

1

My proposal is:

$(function () {
  $('#project').change(function(e){
    var itemToSelect = $(this).find(":selected").val();
    $('#tasks').val(itemToSelect);
  });
});

<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<select id="project">
    <option value="1">This is project 1</option>
    <option value="2">This is project 2</option>
</select>
<select id="tasks">
    <option value="1">This is task 1</option>
    <option value="2">This is task 2</option>
</select>

answered Dec 23 '15 at 18:59

gaetanoM

41,594
6
42
61

The combobox box isn't a simple selection it adds a text entry box and autocomplete selection, setting the value using the "val" method does not update the text box. The "select" elements are hidden from view. – SPlatten Dec 23 '15 at 19:05
@SPlatten I understand but to give you more I need more info. There a lot of different autocomplete selection so which one do you use? – gaetanoM Dec 23 '15 at 19:07
The scripts I am using: jquery-2.1.4.min.js, jquery-ui.min.js – SPlatten Dec 23 '15 at 19:13
@SPlatten and for the selection autocomplete? – gaetanoM Dec 23 '15 at 19:18
jdq widgets "jqxcombobox.js", jQWidgets v3.6.0 – SPlatten Dec 23 '15 at 19:20

score 0 · Accepted Answer · answered Dec 23 '15 at 20:34

The solution as discussed with "Alla M. Jaddou" was to add an id to the input box created by the $.widget( "custom.combobox", {}); callback.

In the createAutocomplete method I get the id assigned to the select element:

    id = this.element[0].id;

I then add an id attribute to the input box with the prefix "inp".

When a selection is changed in the combo I then get the input element and set the text.

Jquery comboboxes, selection in code

3 Answers3