有沒有辦法在 HTML 中動態更改 select forms ？

Question

我有一個 web 應用程序，用戶可以在其中更改某些事件的描述，以便在游客 android 應用程序中使用。

事情是，就目前而言，表單有 2 個字段，一個包含數據庫中所有事件的 select 類型的字段，以及一個用戶編寫新描述的文本字段。

現在，雖然這已經足夠了，但當應用程序完成並向公眾發布時，數據庫將有數百個事件。 所以，我想制作它，所以有一個名為“PLACE”的第三個字段。 一旦選擇了一個地點，事件的 select 形式就會改變，只顯示與該地點相關的事件（例如：植物園將只顯示中世紀集市的數據，而不是哈姆雷特的戲劇）。

¿ 這可能與 JS 嗎？

這是我正在使用的代碼：

<html>
   <head>
   <link rel="stylesheet" href="style_form.css">

   <script type="text/javascript">
       //auto expand textarea
       function adjust_textarea(h) {
           h.style.height = "20px";
           h.style.height = (h.scrollHeight)+"px";
       }
   </script>
</head>

   <body>

       ENTRE
   <form class="form-style-4" action="update.php" method="post">
       <br>
   <label for="id"><span>Elija un evento a cambiar</span>
   <br>
     <select name="id">

         <?php

           $server = I;
           $usuario = WONT;
           $pass = SHOW;
           $database= THIS;

           $mysqli = new mysqli($server, $usuario, $pass, $database);

           $query = $mysqli -> query ("SELECT * FROM INFORMACION_EVENTOS");

           while ($valores = mysqli_fetch_array($query)) {
               echo '<option value="'.$valores[id].'">'.$valores[titulo].'</option>';
           }

       ?>
     </select>
     <br>
     </label>
     <label for="descripcion">
     <span>Descripcion</span>
     <br>
     <textarea name="descripcion" onkeyup="adjust_textarea(this)" required="true" placeholder="Max 50 caracteres"></textarea>

     </label>
     <input type="submit" value="Submit">
   </form>
   </body>
</html>

Answer 1

是的。 這是瀏覽器中 Javascript 的主要目的之一 - 操作文檔 Object Model (DOM)。 There are two ways to go about it: You can build the data into the Javascript, perhaps dynamically generating all or a portion of the Javascript on the server side, as the page is delivered, building objects or arrays of the various options you wish to將它們包含在發送到瀏覽器的 Javascript 中。 隨着數據量的增加，這種方式變得繁瑣和笨拙。

另一個選項是使用 AJAX 和服務器 API 以允許頁面在選擇更改時請求選項。 這是大多數站點管理它的方式，但它可能需要更多的工作，因為它需要服務器和客戶端上的代碼，並使用定義的 API 進行交互。

至於物理操作<select>元素中的值，您可以自己編寫一些東西，類似於這個 StackOverflow 答案，或者您可以使用 jQuery 或 Angular 等 DOM 庫。

有沒有辦法在 HTML 中動態更改 select forms ？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-04-21 20:54:30

有沒有辦法在 HTML 中動態更改 select forms ？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-04-21 20:54:30

解決方案1
0 已采納 2020-04-21 20:54:30