Изменить опцию выбора с помощью JavaScript на основе переменной PHP - PullRequest
Новая
       7

Изменить опцию выбора с помощью JavaScript на основе переменной PHP

0 голосов
/ 30 сентября 2019

Я прочитал несколько веток здесь и до сих пор не могу найти хороший ответ на свой вопрос, поэтому я прошу прощения за этот глупый вопрос, но нет слов о том, насколько я плох с Javascript.

В настоящее время я пытаюсь изменить параметры выбора для второго тега выбора на основе выбранного параметра из первого. 

<select name="category" id="category">
    <option value="" disabled selected value>Cat1</option>
                <?php 
  $stmt = $conn->query("SELECT * FROM cats");
  while($row = $stmt->fetch()) {
    echo "<option value='".$row['name']."'>".$row['text']."</option>";
  }
  ?>
</select>
    </div>
</div>

  <div class="div3">
<div class="div4">
  <label for="test">cat2</label>
</div>
<div class="div7">
 <select name="sub" id="sub">
 <?php 
  $stmt = $conn->query("SELECT * FROM cats WHERE name = $cat");
  while($row = $stmt->fetch()) {
    echo "<option value='".$row['subname']."'>".$row['subtext']."</option>";
  }
  ?>
 </select>
</div>

Так что я знаю, что мне как-то нужновызовите JavaScript с помощью «onchange», который получит переменную $ cat, а затем передаст информацию из таблицы SQL. Но я абсолютно не знаю, как я могу это сделать .. Я не хочу использовать ни форму, ни Ajax. Если это возможно с чистым Javascript, я был бы очень рад ..

Тогда, конечно, я не ожидаю, что вы решите весь вопрос для меня, но я был бы рад, если бы кто-то мог указать мне на правонаправление (не думайте слишком много о подготовленных инструкциях с $ stmt, это всего лишь первый тест)

1 Ответ

0 голосов
/ 30 сентября 2019

Если вы не хотите использовать Ajax, вам нужно получить все данные для каждой основной категории и сохранить их все в виде объединенного массива JS.

Что-то вроде 

  $jstext = ''; //our pieced-together array definition for JS
  $stmt = $conn->query("SELECT * FROM cats");
  while($row = $stmt->fetch()) {
    echo "<option value='".$row['name']."'>".$row['text']."</option>";

    $stmt2 = $conn->query("SELECT * FROM cats WHERE name = {$row['name']}");
    $jstext .= "subcategories['".$row['name']."'] = '";
    $tmp = '';
    while($row2 = $stmt2->fetch()) {
      $tmp .= '<option>'.$row2['name'].'</option>'; //generate html for each subcategory
    }
  }
  $jstext .= $tmp."';\r\n"; //add subcategories to array index, add line break

Затем в свой тег <script> добавьте: 

<script>
var subcategories;
<?php echo $jstext ?>
</script>

. Это должно сгенерировать массив с индексом каждой основной категории, а содержимое - это соответствующие подкатегории.

ПримерВыходные данные: 

<script>
var subcategories;
subcategories['maincat1'] = '<option>subcat1</option><option>subcat3</option>';
subcategories['maincat2'] = '<option>subcat4</option><option>subcat6</option>';
</script>

Теперь вам просто нужно заменить innerHTML вашего "sub" select, когда select "category" запускает событие onchange.

...