Databases
StackOverflow2013
Postsdbo
POCannot get selected value of select with jQuery when the select has been set with jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCannot get selected value of select with jQuery when the select has been set with jQuery
    primarykey
    data
    text
    <p>I am trying to create some cascading dropdowns, I have this I built function which half works:</p> <pre><code> function CascadeDropDowns(parentClass, childClass, action) { var DropDownId = $(parentClass + " option:selected").val(); $.ajax({ url: "/Terminals_configuration/" + action, data: { DropDownId: DropDownId }, dataType: "json", type: "POST", error: function () { alert("An error occurred."); }, success: function (data) { var items = ""; $.each(data, function (i, item) { items += "&lt;option value=\"" + item.Value + "\"&gt;" + item.Text + "&lt;/option&gt;"; }); $(childClass).html(items); $(childClass)[0].selectedIndex = 0; } }); } $(document).ready(function(){ $(".DeviceTypeDDL").change(function () { CascadeDropDowns(".DeviceTypeDDL", ".ConfigGroupDDL", "GetGroups"); CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }); $(".ConfigGroupDDL").change(function () { CascadeDropDowns(".ConfigGroupDDL", ".ConfigNameDDL", "GetParameters"); }); }); </code></pre> <p>Relevant HTML - Link to jQuery v1.8.2 not included here!</p> <pre><code>&lt;form action="/Terminals_configuration" method="post"&gt; &lt;fieldset&gt; &lt;legend&gt; &lt;h2&gt;Configuration settings&lt;/h2&gt; &lt;/legend&gt; &lt;div class="editor-label"&gt; &lt;label for="DeviceType"&gt;Device type&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;select class="DeviceTypeDDL" data-val="true" data-val-number="The field DeviceTypeSelectedItem must be a number." id="DeviceTypeSelectedItem" name="DeviceTypeSelectedItem"&gt;&lt;option value="8"&gt;IT&lt;/option&gt; &lt;option value="9"&gt;RS&lt;/option&gt; &lt;/select&gt; &lt;span class="field-validation-valid" data-valmsg-for="DeviceTypeSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="editor-label"&gt; &lt;label for="ConfigGroup"&gt;ConfigGroup&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;select class="ConfigGroupDDL" data-val="true" data-val-number="The field ConfigGroupSelectedItem must be a number." id="ConfigGroupSelectedItem" name="ConfigGroupSelectedItem"&gt;&lt;option value="-1"&gt;No value&lt;/option&gt; &lt;/select&gt; &lt;span class="field-validation-valid" data-valmsg-for="ConfigGroupSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="editor-label"&gt; &lt;label for="ConfigName"&gt;ConfigName&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;select class="ConfigNameDDL" data-val="true" data-val-number="The field ConfigNameSelectedItem must be a number." id="ConfigNameSelectedItem" name="ConfigNameSelectedItem"&gt;&lt;option value="-1"&gt;No value&lt;/option&gt; &lt;/select&gt; &lt;span class="field-validation-valid" data-valmsg-for="ConfigNameSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="editor-label"&gt; &lt;label for="ConfigValue"&gt;ConfigValue&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;input class="text-box single-line" data-val="true" data-val-required="Please enter the configuration value" id="ConfigValue" name="ConfigValue" type="text" value="" /&gt; &lt;span class="field-validation-valid" data-valmsg-for="ConfigValue" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/div&gt; &lt;div class="editor-label"&gt; &lt;label for="MergeOrDelete"&gt;MergeOrDelete&lt;/label&gt; &lt;/div&gt; &lt;div class="editor-field"&gt; &lt;select class="MergeDeleteDDL" data-val="true" data-val-number="The field MergeOrDeleteSelectedItem must be a number." id="MergeOrDeleteSelectedItem" name="MergeOrDeleteSelectedItem"&gt;&lt;option value="0"&gt;Delete&lt;/option&gt; &lt;option value="1"&gt;Merge&lt;/option&gt; &lt;/select&gt; &lt;span class="field-validation-valid" data-valmsg-for="MergeOrDeleteSelectedItem" data-valmsg-replace="true"&gt;&lt;/span&gt; &lt;/div&gt; &lt;p&gt; &lt;input type="submit" value="Add" /&gt; &lt;/p&gt; &lt;/fieldset&gt; &lt;/form&gt; </code></pre> <p>The issue is When the first dropdown is changed i will need to populate the two children. And when the second dropdown is changed I only need to populate the one child.</p> <p>I thought that by setting <code>$(childClass)[0].selectedIndex = 0;</code> then this would make this value selected, so that when the function fires a second time with the child dropdown that has just been populated it would be able to get this value, but it doesn't.</p> <p>I'm thinking maybe the new are not available in the DOM at this point but im not sure.</p> <p>Any help would be great.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USDavidB
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COPlease add your HTML markup too :)
      singulars
      1. POCannot get selected value of select with jQuery when the select has been set with jQuery
      1. USMurali Murugesan
    2. CODone, hopefully you've some help for me
      singulars
      1. POCannot get selected value of select with jQuery when the select has been set with jQuery
      1. USDavidB
    3. COIf you've no interest in answering the question then dont comment at all. Especially when in this instance seeing the HTML is pointless.
      singulars
      1. POCannot get selected value of select with jQuery when the select has been set with jQuery
      1. USDavidB
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload