新手问题:如何在html中从php变量填充组合框

ntjbwcob  于 2023-05-16  发布在  PHP
关注(0)|答案(3)|浏览(69)

我是新的php,js, AJAX 和html,我有一个问题,如下所述:我有两个选择框,都是从数据库中填充的,并显示在一个网站上(目前有效)。当用户在combobox1中选择一个项目,我想重置combobox2,并从数据库中填充其他值。我使用一个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>
mwngjboj

mwngjboj1#

基于我们在评论中的交流,我发布了一个通用代码

将数据库中的相关数据设置为多维数组(我假设这是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了。你可能会得到一个更优雅的脚本。
  • 这并没有回答你在标题中描述的问题,而是我从我们在评论中的交流中了解到你需要什么。对于使用DB数据填充<select>的PHP,请检查this question's答案。
4dc9hkyq

4dc9hkyq2#

需要设置类并使用每个功能进行重置,而不是当前的选择框。
代码在这里:

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

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

});

});
6mzjoqzu

6mzjoqzu3#

<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>

相关问题