There are 10 select elements on the page in Dive. When changing the value of one of them, all downstream ones should load new lists for selection (for each select it creates a new query to the database in sql). Push me on how to do this?

  • What does your page generate? If it is ASP.NET, then ASP.NET AJAX either make a web service (.asmx) and call it from JavaScript. - nzeemin
  • Yes, asp.net. Can you give a link to the materials? It is desirable that it is short and as simple as possible)) - Anthony_L

2 answers 2

You need on every select hang an onchange handler. When one of the handlers works, you should check the values ​​of all elements (well, or those that are needed) and send the corresponding request to the server.

On the server, you need to implement logic, which will, upon request, select the necessary information from the database and send it to the client, for example, in JSON format.

When infa came, just JS'om generate a new markup (set <option> in this case) and paste it where it should.

You can assign the generation of markup to the server, that is, it will immediately come to html, not JSON. Then the server response is simply inserted in the right place.

The specific implementation can vary widely, but the essence is about the same.

  • The first part I know about how to implement, that is, that I will transfer the values ​​to the server, there I will select the values ​​I need from the database on request. But how to remove old options and insert new ones exactly in the right place in the markup? Ie, how can I transfer the data back to the client? - Anthony_L
  • @Anthony_L Well, you can use jQuery to make your life easier in terms of selecting elements and inserting new values. And if through pure JS, for example, there is an innerHTML property (although there are other options for working with DOM) for an element, that is, you can completely replace it in the case of select with new markup, you can search for an element on a page, for example, through document.querySelectorAll or document.getElementById . As for the server, I’m not strong in VB, although I’ll tell you that the data is transferred in the same way as html when loading, that is, just “output the markup to the browser” - RussCoder
  • It doesn't matter to me to do it on pure js, or on jquery. For now, you just need to make it work) If I call the method on the server via PageMethods.CalledMethod, then I should return the string in which I will create the markup on the server, right? Does innerHTML replace the markup inside the tag? Those. then I just write this returned string in innerHTML and that's it?) And then my method name will be CalledMethods, and should it be stored in the code on the page? ... Took it from here: cyberforum.ru/csharp-net/thread165127.html If understand, plz explain) - Anthony_L
  • @Anthony_L Did not work with ASP.NET, but from the code, as I understood it, your idea is correct. True, you probably do not understand the mechanism of the entire system. Yes, just try to get any string from the server and insert it into innerHTML. Let me explain - PageMethods is apparently a list of JS functions that simply send a special request to the server, where the same-name function is executed in C # or VB, which returns data (string). Read about XMLHttpRequest in JS and about Ajax requests, necessarily. I advise the book Flanagana "JavaScript. A detailed guide." or at least at learn.javascript.ru/ajax-xmlhttprequest - RussCoder

I finally did what I wanted with the help of my colleagues. I will try to describe all this: 1) Because I needed to display the initially filled elements, instead of Select, I added asp: DropDownList elements to the page and filled them into the CodeBehind page.

  Public Sub Area_Load(sender As Object, e As EventArgs) Handles Area.Load //Пример для элемента с ID = Area Area.Items.Clear() //очищаем список Dim li As ListItem = New ListItem("Text", "caption") //создаем переменную типа ListItem, куда передаем два значения: 1 - текст, который будет отображаться, 2 - value этого элемента списка If NeedSelected() Then // если нужно сразу загрузить список с уже выбранным элементом li.Selected = True End If Area.Items.Add(li) // добавляем элемент списка на страницу End Sub

2) Next, in the js script, added functions that handle onchange events that call the method from the server via PageMethods.

 function Page_Init(sender) { var Area = $get('<%=Area.ClientID %>'); $addHandler(Area, 'change', Area_changed); } function Area_changed(evt) { PageMethods.SetBuilding(evt.target.selectedIndex, Building_Success, Building_Failure); } function Building_Success(results) { if (results) { // код будет ниже } else alert("An unexpected error occurred"); } function Building_Failure(error) { if (error) { alert(error.get_message()); } else alert("An unexpeceted error occurred"); }

At the same time, to call PageMethod, you need to add ScriptManager to the page with the attribute EnablePageMethods = "true"

 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />

3) In the page CodeBehing wrote a function returning an array of elements

 <System.Web.Services.WebMethod()> Public Shared Function SetBuilding(ByVal selectedIndex As Integer) // Ваш код Return arrayToReturn End Function

4) In function Building_Success in the js-script I write code that processes the array and fills the list Building

 function Building_Success(results) { if (results) { var ddl = $get('Building'); // забираю нужный мне элемент по ID ddl.options.length = 0; // очищаю его for (item in results) { // т.к. возвращаю с сервера массив объектов, то пробегаю по всем его элементам ddl.options[ddl.options.length] = new Option(results[item].caption, results[item].ID); // caption и ID - это свойства объектов(элементов массива) } } else alert("An unexpected error occurred"); }

5) Long and hard dancing with a tambourine, because I have a total of 10 lists)