从PHP变量在HTML中填充下拉框的方法

huangapple
go评论59阅读模式
英文:

How to fill combobox from php variable in html

问题

以下是您提供的代码的翻译部分：

第一个下拉选择框中有两个选项框，都是从数据库中填充的，并在网站上显示（目前正常工作）。

当用户在第一个选择框中选择一个项目时，我希望重置第二个选择框，并根据第一个选择框的值填充它。

我正在使用MVC处理程序来完成这个操作。

英文:

I have two selection boxes, both filled from database and displayed on a web site(that works for now).

When the user choose an item in first select dropdown, I want to reset second select dropdown and fill it with other values based on the first select dropdown value.

I am using an MVC handler to do this.

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

答案1

得分: 0

需要设置类并使用每个函数来重置除当前选择框之外的其他选择框。

以下是代码部分：

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

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

Need to set class and use each function for reset other than the current selectbox.

Code is here :

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

答案2

得分: 0

以下是您要翻译的内容：

基于我们在评论中的交流，我发布了一般性的代码

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

Array
(
    [<combobox1 option 1 value>] => Array
        (
            [0] => <combobox2 option 1 value> // 与combobox1选项1相关
            [1] => <combobox2 option 2 value> // 与combobox1选项1相关
            [2] => <combobox2 option 3 value> // 与combobox1选项1相关
            // 以此类推
        )

    [<combobox1 option 2 value>] => Array
        (
            [0] => <combobox2 option 1 value> // 与combobox1选项2相关
            [1] => <combobox2 option 2 value> // 与combobox1选项2相关
            [2] => <combobox2 option 3 value> // 与combobox1选项2相关
            // 以此类推
        )
    // 依此类推
)

JavaScript部分：

// 将PHP数组传递给JavaScript（我在这里称之为$full_data_array）
<?php foreach($full_data_array as $key => $value): ?>
   let key = "<?= $key; ?>";
   var optionsArray[key] = 
      <?php echo '["' . implode('", "', $value) . '"]' ?>
<?php endforeach; ?>

// 更新combobox2的onchange函数
function update_combobox2(){
   var chosenField = document.getElementById('combobox1').value; // 来自combobox1的值
   var comboBox2 = document.getElementById('combobox2');
   optionsArray[chosenField].map( (option, i) => {
      let opt = document.createElement("option");
      opt.value = i; // 索引。您可以插入选项值
      opt.innerHTML = option;
      combobox2.append(opt);
   });
}

HTML/PHP部分：

<select name="combobox1" id="combobox1" onChange="update_combobox2()">
// 您的选项（这也应该设置为上面数组中的键）
</select>
<select name="combobox2" id="combobox2">
// 您可以在这里添加一个默认的空选项
</select>

注意事项：

  • 我已经很久没有使用jQuery了。使用它可能会得到更优雅的脚本。

  • 这不是回答标题中描述的内容，而是我在评论中理解您需要的内容。要使用数据库数据填充<select>的PHP代码，请查看这个问题的答案。

英文:

Based on our exchange in the comments, I'm posting a general code

Set your relevant data from the DB in a multidimensional array (I'm assuming this is PHP, because this should be data taken from the DB), like so:

Array
(
    [&lt;combobox1 option 1 value&gt;] =&gt; Array
        (
            [0] =&gt; &lt;combobox2 option 1 value&gt; // relevant to combobox1 option 1
            [1] =&gt; &lt;combobox2 option 2 value&gt; // relevant to combobox1 option 1
            [2] =&gt; &lt;combobox2 option 3 value&gt; // relevant to combobox1 option 1
            // and so on
        )

    [&lt;combobox1 option 2 value&gt;] =&gt; Array
        (
            [0] =&gt; &lt;combobox2 option 1 value&gt; // relevant to combobox1 option 2
            [1] =&gt; &lt;combobox2 option 2 value&gt; // relevant to combobox1 option 2
            [2] =&gt; &lt;combobox2 option 3 value&gt; // relevant to combobox1 option 2
            // and so on
        )
    // and so forth
)

javascript part:

// passing the PHP array to javascript (I&#39;m calling it $full_data_array here)
&lt;?php foreach($full_data_array as $key =&gt; $value): ?&gt;
   let key = &quot;&lt;?= $key; ?&gt;&quot;;
   var optionsArray[key] = 
      &lt;?php echo &#39;[&quot;&#39; . implode(&#39;&quot;, &quot;&#39;, $value) . &#39;&quot;]&#39; ?&gt;;
&lt;?php endforeach; ?&gt;

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

HTML/PHP part:

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

NOTES:

  • I haven't used jQuery in a long while. You might get a more elegant script with it.

  • This does NOT answer what you described in the title, rather what I understood you needed from our exchange in the comments. For a PHP fill of &lt;select&gt; with DB data, check this question's answers.

答案3

得分: 0

Here is the translated code without the translation of the code parts:

<form>
    <input type="submit" 
        id="jQueryButton11" 
        name="btn_save_listen_bezeichnung" 
        value="Apply" 
        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">List:</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>      
</form>

Please note that I've kept the code structure and placeholders in the translation to maintain its functionality.

英文: 
&lt;form&gt;
&lt;input type=&quot;submit&quot; 
id=&quot;jQueryButton11&quot; 
name=&quot;btn_save_listen_bezeichnung&quot; 
value=&quot;&#220;bernehmen&quot; 
style=&quot;position:absolute;left:46px;top:325px;width:175px;height:32px;z-index:148&quot; 
tabindex=&quot;3&quot;&gt;
&lt;div id=&quot;bv_Text62&quot; style=&quot;margin:0;padding:0;position:absolute;left:356px;top:89px;width:240px;height:15px;text-align:left;z-index:149;&quot;&gt;
&lt;font style=&quot;font-size:13px&quot; color=&quot;#000000&quot; face=&quot;Arial&quot;&gt;Liste:&lt;/font&gt;
&lt;/div&gt;
&lt;div style=&quot;position:absolute;left:356px;top:110px;width:193px;height:17px;border:1px #C0C0C0 solid;z-index:150&quot;&gt;
&lt;select
name=&quot;cmb_listen_bearbeitung&quot; 
size=&quot;1&quot; 
id=&quot;cmb_listen_bearbeitung&quot; 
onchange=&quot;update_list_list_eintraege()&quot;
style=&quot;position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;&quot; 
tabindex=&quot;4&quot;&gt;
&lt;?php
if ($listen-&gt;num_rows &gt; 0) {
mysqli_data_seek($listen, 0);
while ($row = mysqli_fetch_array($listen)) {
unset($listen_id, $bezeichnung);
$listen_id = $row[&#39;listen_id&#39;];
$bezeichnung = $row[&#39;bezeichnung&#39;];
if ($liste_ausgewaehlt == $listen_id) {
echo &#39;&lt;option value=&quot;&#39; . $listen_id . &#39;&quot;selected&gt;&#39; . $bezeichnung . &#39;&lt;/option&gt;&#39;;
} else {
echo &#39;&lt;option value=&quot;&#39; . $listen_id . &#39;&quot;&gt;&#39; . $bezeichnung . &#39;&lt;/option&gt;&#39;;
}
}
mysqli_data_seek($listen, 0);
}
?&gt;		
&lt;/select&gt;
&lt;/div&gt;
&lt;div style=&quot;position:absolute;left:356px;top:163px;width:193px;height:134px;border:1px #C0C0C0 solid;z-index:151&quot;&gt;
&lt;select name=&quot;list_list_eintraege&quot; 
size=&quot;10&quot; 
id=&quot;list_list_eintraege&quot;
onchange=&quot;GetSelectedListenEintragValue(this)&quot;
style=&quot;position:absolute;left:0px;top:0px;width:100%;height:100%;border-width:0px;font-family:Calibri;font-size:13px;&quot; 
tabindex=&quot;5&quot;&gt;
&lt;?php
if ($full_data_array-&gt;num_rows &gt; 0) {
while ($row = mysqli_fetch_array($full_data_array)) {
unset($listen_id, $entry_short, $entry_long);
$listen_id = $row[&#39;listen_id&#39;];
if ($listen_id == $liste_ausgewaehlt) {
$entry_short = $row[&#39;entry_short&#39;];
$entry_long = $row[&#39;entry_long&#39;];
echo &#39;&lt;option value=&quot;&#39; . $entry_short . &#39;&quot;&gt;&#39; . $entry_long . &#39;&lt;/option&gt;&#39;;
}
}
mysqli_data_seek($full_data_array, 0);
}
?&gt;				
&lt;/select&gt;
&lt;/div&gt;
&lt;script  type=&quot;text/javascript&quot;&gt;
// passing the PHP array to javascript (I&#39;m calling it $full_data_array here)
&lt;?php foreach($full_data_array as $key =&gt; $value): ?&gt;
let key = &quot;&lt;?= $key; ?&gt;&quot;;
var optionsArray[key] = 
&lt;?php echo &#39;[&quot;&#39; . implode(&#39;&quot;, &quot;&#39;, $value) . &#39;&quot;]&#39; ?&gt;;
&lt;?php endforeach; ?&gt;
// the onchange function that updates combobox2
function update_list_list_eintraege(){
var chosenField = document.getElementById(&#39;cmb_listen_bearbeitung&#39;).value; // the value from combobox1
var comboBox2 = document.getElementById(&#39;list_list_eintraege&#39;);
comboBox2.empty();        
optionsArray[chosenField].map( (option, i) =&gt; {
let opt = document.createElement(&quot;option&quot;);
opt.value = i; // the index. you can insert option value instead
opt.innerHTML = option;
comboBox2.append(opt);
});
}
&lt;/script&gt;

</form>

huangapple
  • 本文由 发表于 2023年5月15日 15:21:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/76251717.html
  • box
  • fill
  • php
  • selection
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定