新手问题：How to fill combobox from php variable in html

问题描述 投票：0回答：3

我是 php、js、ajax 和 html 的新手，我遇到了如下所述的问题：

我有两个选择框，都从数据库中填充并显示在网站上（目前有效）。

当用户在第一个选择下拉列表中选择一个项目时，我想重置第二个选择下拉列表并根据第一个选择下拉列表值用其他值填充它。

我正在使用 MVC 处理程序来执行此操作。

你能帮帮我吗，我完全不知道该怎么做。 谢谢

<div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
    <select 
        name="cmb_listen_bearbeitung" 
        size="1" 
        id="cmb_listen_bearbeitung" 
        onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)"             
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="4">
        <?php
            if ($listen->num_rows > 0) {
                mysqli_data_seek($listen, 0);
                while ($row = mysqli_fetch_array($listen)) {
                    unset($listen_id, $bezeichnung);
                    $listen_id = $row['listen_id'];
                    $bezeichnung = $row['bezeichnung'];
                    if ($liste_ausgewaehlt == $listen_id) {
                        echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
                    } else {
                        echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
                    }
                }
                mysqli_data_seek($listen, 0);
            }

        ?>      
    </select>
</div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
    <select name="list_list_eintraege" 
        size="10" 
        id="list_list_eintraege" 
        onchange="GetSelectedListenEintragValue(this)" 
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="5">
        <?php
            if ($listeneintrag->num_rows > 0) {
                while ($row = mysqli_fetch_array($listeneintrag)) {
                    unset($listen_id, $entry_short, $entry_long);
                    $listen_id = $row['listen_id'];
                    if ($listen_id == $liste_ausgewaehlt) {
                        $entry_short = $row['entry_short'];
                        $entry_long = $row['entry_long'];
                        echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
                    }
                }
                mysqli_data_seek($listeneintrag, 0);
            }
        ?>              
    </select>
</div>

<div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
    <select 
        name="cmb_listen_bearbeitung" 
        size="1" 
        id="cmb_listen_bearbeitung" 
        onchange="GetSelectedListenBearbeitungValue(this,list_list_eintraege)"             
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="4">
        <?php
            if ($listen->num_rows > 0) {
                mysqli_data_seek($listen, 0);
                while ($row = mysqli_fetch_array($listen)) {
                    unset($listen_id, $bezeichnung);
                    $listen_id = $row['listen_id'];
                    $bezeichnung = $row['bezeichnung'];
                    if ($liste_ausgewaehlt == $listen_id) {
                        echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
                    } else {
                        echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
                    }
                }
                mysqli_data_seek($listen, 0);
            }

        ?>      
    </select>
</div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
    <select name="list_list_eintraege" 
        size="10" 
        id="list_list_eintraege" 
        onchange="GetSelectedListenEintragValue(this)" 
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="5">
        <?php
            if ($listeneintrag->num_rows > 0) {
                while ($row = mysqli_fetch_array($listeneintrag)) {
                    unset($listen_id, $entry_short, $entry_long);
                    $listen_id = $row['listen_id'];
                    if ($listen_id == $liste_ausgewaehlt) {
                        $entry_short = $row['entry_short'];
                        $entry_long = $row['entry_long'];
                        echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
                    }
                }
                mysqli_data_seek($listeneintrag, 0);
            }
        ?>              
    </select>
</div>
php selection fill box
3个回答
0
投票

根据我们在评论中的交流，我发布了一个通用代码

将数据库中的相关数据设置为多维数组（我假设这是 PHP，因为这应该是从数据库中获取的数据），如下所示：

Array
(
    [<combobox1 option 1 value>] => Array
        (
            [0] => <combobox2 option 1 value> // relevant to combobox1 option 1
            [1] => <combobox2 option 2 value> // relevant to combobox1 option 1
            [2] => <combobox2 option 3 value> // relevant to combobox1 option 1
            // and so on
        )

    [<combobox1 option 2 value>] => Array
        (
            [0] => <combobox2 option 1 value> // relevant to combobox1 option 2
            [1] => <combobox2 option 2 value> // relevant to combobox1 option 2
            [2] => <combobox2 option 3 value> // relevant to combobox1 option 2
            // and so on
        )
    // and so forth
)

javascript部分：

// passing the PHP array to javascript (I'm calling it $full_data_array here)
<?php foreach($full_data_array as $key => $value): ?>
   let key = "<?= $key; ?>";
   var optionsArray[key] = 
      <?php echo '["' . implode('", "', $value) . '"]' ?>;
<?php endforeach; ?>

// the onchange function that updates combobox2
function update_combobox2(){
   var chosenField = document.getElementById('combobox1').value; // the value from combobox1
   var comboBox2 = document.getElementById('combobox2');
   optionsArray[chosenField].map( (option, i) => {
      let opt = document.createElement("option");
      opt.value = i; // the index. you can insert option value instead
      opt.innerHTML = option;
      combobox2.append(opt);
   });
}

HTML/PHP 部分：

<select name="combobox1" id="combobox1" onChange="update_combobox2()">
// your options (that should also be set as keys in the array above)
</select>
<select name="combobox2" id="combobox2">
// you can throw in a default empty option here
</select>

注意事项：

  • 好久没用jQuery了。你可能会得到一个更优雅的脚本。

  • 这并没有回答您在标题中描述的内容，而是我从我们在评论中的交流中了解到您需要的内容。对于 

    <select>
    的 PHP 填充和数据库数据，请检查 this question's answers.

0
投票

除当前选择框外，需要设置类并使用每个功能进行重置。

代码在这里：

$(".yourclassname").click( function(this)  {
 var selected = $(this);

$(".yourclassname").each( function(this)  {
 if(selected   != $(this)){
  $(this).reset();
}

});

});
0
投票
<form>
<input type="submit" 
    id="jQueryButton11" 
    name="btn_save_listen_bezeichnung" 
    value="Übernehmen" 
    style="position:absolute;left:46px;top:325px;width:175px;height:32px;z-index:148" 
    tabindex="3">
<div id="bv_Text62" style="margin:0;padding:0;position:absolute;left:356px;top:89px;width:240px;height:15px;text-align:left;z-index:149;">
    <font style="font-size:13px" color="#000000" face="Arial">Liste:</font>
</div>
        <div style="position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150">
        <select
            name="cmb_listen_bearbeitung" 
            size="1" 
            id="cmb_listen_bearbeitung" 
            onchange="update_list_list_eintraege()"
            style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
            tabindex="4">
            <?php
                if ($listen->num_rows > 0) {
                    mysqli_data_seek($listen, 0);
                    while ($row = mysqli_fetch_array($listen)) {
                        unset($listen_id, $bezeichnung);
                        $listen_id = $row['listen_id'];
                        $bezeichnung = $row['bezeichnung'];
                        if ($liste_ausgewaehlt == $listen_id) {
                            echo '<option value="' . $listen_id . '"selected>' . $bezeichnung . '</option>';
                        } else {
                            echo '<option value="' . $listen_id . '">' . $bezeichnung . '</option>';
                        }
                    }
                    mysqli_data_seek($listen, 0);
                }

            ?>      
        </select>
    </div>
<div style="position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151">
    <select name="list_list_eintraege" 
        size="10" 
        id="list_list_eintraege"
        onchange="GetSelectedListenEintragValue(this)"
        style="position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;" 
        tabindex="5">
        <?php
            if ($full_data_array->num_rows > 0) {
                while ($row = mysqli_fetch_array($full_data_array)) {
                    unset($listen_id, $entry_short, $entry_long);
                    $listen_id = $row['listen_id'];
                    if ($listen_id == $liste_ausgewaehlt) {
                        $entry_short = $row['entry_short'];
                        $entry_long = $row['entry_long'];
                        echo '<option value="' . $entry_short . '">' . $entry_long . '</option>';
                    }
                }
                mysqli_data_seek($full_data_array, 0);
            }
        ?>              
    </select>
  
</div>
<script  type="text/javascript">
// passing the PHP array to javascript (I'm calling it $full_data_array here)
<?php foreach($full_data_array as $key => $value): ?>
   let key = "<?= $key; ?>";
   var optionsArray[key] = 
   <?php echo '["' . implode('", "', $value) . '"]' ?>;
<?php endforeach; ?>

// the onchange function that updates combobox2
function update_list_list_eintraege(){
   var chosenField = document.getElementById('cmb_listen_bearbeitung').value; // the value from combobox1
   var comboBox2 = document.getElementById('list_list_eintraege');

   comboBox2.empty();        
   optionsArray[chosenField].map( (option, i) => {
      let opt = document.createElement("option");
      opt.value = i; // the index. you can insert option value instead
      opt.innerHTML = option;
      comboBox2.append(opt);
   });
}
</script>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.