Question

Yeah, I know this question sounds like there are already lots of other threads where it already has been answered. But unfortunately not. In this case I have a JQ function which autocompletes the users input. Like if the user types "Ph" the full subject "Physics" is already shown in a JQ dropdown under the input field. The user will have to select more information than just this first input, like a sub-genre of the firstly selected subject. The sub-genre field is disabled first, so the user can't make anything wrong and of course the sub-genres depend on the first choice. So how can I activate/enable this dropdown selection, when having the first JQ input like that:

$(function() {
var availableKapitel = [
    "Analytische Geometrie",
    "Angewandte Mathematik",
    "Bruchrechnung und rationale Zahlen",
    "etc."
];
$( "#kapitel" ).autocomplete({
source: availableKapitel
});
});

I tried it with something like that, but of course that won't work, since I don't know how to tell one of the choices above how to act like they would have a specific ID

$("#kapitel").click(function() {
$("availableKapitel").attr("enabled", true);
});

The disabled dropdown menu which should be enabled after chosing one of the options from the JQ auto-complete dropdown, looks like this:

<div class="ui-widget" id="sub">
<label for="kapitel">Unterkapitel</label><br/>
<select disabled="disabled" id="subkap">
  <option>--Zuerst Fach/Kapitel auswählen--</option>
  <option>Ähnliche Dreiecke</option>
  <option>Cosinus</option>
  <option>etc.</option>
</select>
</div>
Was it helpful?

Solution

Here it is: You need to use the select event of jquery autocomplete:

$( "#kapitel" ).autocomplete({
source: availableKapitel,
select: function (event, ui) {
$('#subkap').prop('disabled',false);        
}
});

Fiddle: http://jsfiddle.net/sarcastic/7qN2v/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top