Question

I am developing a customizable drop down lists using HTML and JQuery, this drop down lists are containing a hidden html div tag and input text element. If the user click on the input element the jquery code shows the hidden div tag and allow him to choose one of the list items which are embedded inside the hidden div tag. After the user chose his desire item a JavaScript code runs and reflect his chosen item to the text element. here is the html code:

<input type="text" readonly="true" class="reg-content-datacell-textfield" style="cursor:pointer;width:270px;float:left;display:inline-block" id="txtSector" name="txtSector" />
<br />
<div id="ddlSector" style="left:26px;" class="ddlist">
<ul>
    <% 
      MainDatabaseOperationsClass.DatabaseOperations databaseOperations = new MainDatabaseOperationsClass.DatabaseOperations();//db connection class
      string sqlStatement = "select * from Dbtsniper02.dbo.Sectors";//get all database sectors
      System.Data.SqlClient.SqlDataReader sqlDataReader = databaseOperations.getDataFromDBAsSQLDataReader(sqlStatement);//execute sql statement
      while (sqlDataReader.Read())
      {
     %>
     <li class="ddlListSector"><% Response.Write("(" + sqlDataReader[0].ToString() + ") " + sqlDataReader[1].ToString()); %></li>
     <%
       }
     %>
    </ul>

JavaScript Code:

$(document).click(function (event) {
if ($(event.target).parents().index($('#ddlSector')) == -1) {
            if ($('#ddlSector').is(":visible")) {
    $('#ddlSector').slideToggle();
}};
$(document).ready(function () {
$("#txtSector).click(function (e) {
            $("#ddlSector").slideToggle();
            e.stopPropagation();
            return false;
        });
$("#ddlSector").click(function (e) {
            //disallow hide the current drop down list when you click on it direcly
            e.stopPropagation();
            return false;
        });
        $(".ddlListSector").click(function (e) {
            //relect you selection of the drop down list to the parent input text field
            if ($('#ddlSector').is(":visible")) {
                document.getElementById('txtSector').value = '';
                document.getElementById('txtSector').value = $(this).html();
                $('#ddlSector').slideToggle();
            }
        });});

Now, my question is if I’ve others drop down lists like the above one, how I can Update their items data according to the user choice from the above drop down list. I’m gonna do that via change the sql statement according to the value of the text element associated with the desired drop down list but I do not know how I can trigger the event for update only the div tag content if the user select one of the drop down list items

Thank you very much, I’m highly appreciate your cooperation

Answer 1

It sounds like you want to use an AJAX call inside the ddlListSector click event listener. Make a server file that will expect the value selected and return the list of values you want (probably using a sql command). The AJAX could return plain text, JSON, or even full markup depending on how involved you want the front end to be. In the success callback of the AJAX call, update the contents of whatever other drops you have. It looks like your already using jQuery, so I recommend their docs.