【问题标题】:Any way to define selected inside <select> tag rather than on <option>在 <select> 标记内而不是在 <option> 上定义选择的任何方式
【发布时间】:2012-05-12 23:31:11
【问题描述】:

我有一个奇怪的 html 选项列表,我不想检查每个值以使其被选中或看不到下面的列表

<select name="height" id="height">
    <option value="" label="Select">Select Height</option>
    <option value="4ft 5in - 134cm" label="4ft 5in - 134cm">4ft 5in - 134cm</option>
    <option value="4ft 6in - 137cm" label="4ft 6in - 137cm">4ft 6in - 137cm</option>
    <option value="4ft 7in - 139cm" label="4ft 7in - 139cm">4ft 7in - 139cm</option>
    <option value="4ft 8in - 142cm" label="4ft 8in - 142cm">4ft 8in - 142cm</option>
    <option value="4ft 9in - 144cm" label="4ft 9in - 144cm">4ft 9in - 144cm</option>
    <option value="4ft 10in - 147cm" label="4ft 10in - 147cm">4ft 10in - 147cm</option>
    <option value="4ft 11in - 149cm" label="4ft 11in - 149cm">4ft 11in - 149cm</option>
    <option value="5ft - 152cm" label="5ft - 152cm">5ft - 152cm</option>
    <option value="5ft 1in - 154cm" label="5ft 1in - 154cm">5ft 1in - 154cm</option>
    <option value="5ft 2in - 157cm" label="5ft 2in - 157cm">5ft 2in - 157cm</option>
    <option value="5ft 3in - 160cm" label="5ft 3in - 160cm">5ft 3in - 160cm</option>
    <option value="5ft 4in - 162cm" label="5ft 4in - 162cm">5ft 4in - 162cm</option>
    <option value="5ft 5in - 165cm" label="5ft 5in - 165cm">5ft 5in - 165cm</option>
    <option value="5ft 6in - 167cm" label="5ft 6in - 167cm">5ft 6in - 167cm</option>
    <option value="5ft 7in - 170cm" label="5ft 7in - 170cm">5ft 7in - 170cm</option>
    <option value="5ft 8in - 172cm" label="5ft 8in - 172cm">5ft 8in - 172cm</option>
    <option value="5ft 9in - 175cm" label="5ft 9in - 175cm">5ft 9in - 175cm</option>
    <option value="5ft 10in - 177cm" label="5ft 10in - 177cm">5ft 10in - 177cm</option>
    <option value="5ft 11in - 180cm" label="5ft 11in - 180cm">5ft 11in - 180cm</option>
    <option value="6ft - 182cm" label="6ft - 182cm">6ft - 182cm</option>
    <option value="6ft 1in - 185cm" label="6ft 1in - 185cm">6ft 1in - 185cm</option>
    <option value="6ft 2in - 187cm" label="6ft 2in - 187cm">6ft 2in - 187cm</option>
    <option value="6ft 3in - 190cm" label="6ft 3in - 190cm">6ft 3in - 190cm</option>
    <option value="6ft 4in - 193cm" label="6ft 4in - 193cm">6ft 4in - 193cm</option>
    <option value="6ft 5in - 195cm" label="6ft 5in - 195cm">6ft 5in - 195cm</option>
    <option value="6ft 6in - 198cm" label="6ft 6in - 198cm">6ft 6in - 198cm</option>
    <option value="6ft 7in - 200cm" label="6ft 7in - 200cm">6ft 7in - 200cm</option>
    <option value="6ft 8in - 203cm" label="6ft 8in - 203cm">6ft 8in - 203cm</option>
    <option value="6ft 9in - 205cm" label="6ft 9in - 205cm">6ft 9in - 205cm</option>
    <option value="6ft 10in - 208cm" label="6ft 10in - 208cm">6ft 10in - 208cm</option>
    <option value="6ft 11in - 210cm" label="6ft 11in - 210cm">6ft 11in - 210cm</option>
    <option value="7ft - 213cm" label="7ft - 213cm">7ft - 213cm</option>
</select>

当表单提交时,我需要设置一个特定的值来选择, 我知道选择的值,但我不想匹配每个选项值以使其被选中

所以无论如何我正在寻找的是(不是jquery)从标签本身中选择一个值而不使用标签中的选定选项

我尝试在 select 中设置 value="some value" 但没有成功!

【问题讨论】:

  • 当你说“(不是 jquery)”时,你是指一般的 javascript 吗?
  • 不,我想在服务器端执行此操作,我正在寻找一种替代解决方案来比较选项值并将选项标记为选中,因为在所有选项上编写代码很累

标签: php html drop-down-menu option


【解决方案1】:

没有。

多个选项可以具有相同的值,并且(如果设置了multiple 属性)可以同时选择多个选项,因此使用属性来指定值是不可行的。

【讨论】:

  • 我正在寻找的是一种替代解决方案来比较选项值并将选项标记为在服务器端(php)选择,因为在所有选项上编写代码很累
  • @RohithRaveendran 当然你的选项应该在一个你循环的数组中,所以这意味着你只添加一次?如果不是,那应该是第 1 步。
  • 但是这里我不能循环,请看值:(它们是手动输入的值!
  • 手动将它们输入到数组或数据库中(而不是 HTML 文档)。
  • @RohithRaveendran 我建议你看看我的解决方案。您可以手动添加到数组中的值(或从其他地方获取值)。
【解决方案2】:

您不能更改 &lt;select&gt; 元素来指定它:它不是 HTML 规范的一部分。你可以做的是给每个option元素一个id,然后使用Javascript将正确的option元素设置为selected。在 PHP 中,您需要在正确的位置输出脚本 sn-p 以让浏览器运行它。

例如

<option value="7ft - 213cm" label="7ft - 213cm" id="s23">7ft - 213cm</option>
...
<script>
document.getElementById("s23").selected=true
</script>

【讨论】:

  • 这是一个很好的解决方案,只是 TS 不想要 JavaScript 解决方案(我猜他的意思是说“不是 jquery”)。
  • @Styxxy 是的,很快就会出现一个编辑(当我回答时它说 jquery,并且评论也不存在)。然而,这个解决方案仍然允许一行 php 代码为客户端输出一行 Javascript 并且 - 除了设置 id 这无论如何都是好的做法 - 不需要更改已经编码的列表。
【解决方案3】:

您总是可以编写一个辅助函数,通过传递参数为您提供&lt;option&gt;。类似于

function get_option($value, $selected_value) {
    return '<option value="' . $value . '" label="' . $value . '"' . ($value == $selected_value ? ' selected="selected"' : '') . '>' . $value . "</option>\n";
}

这将使您不必为每个值都编写它,而只需这样做

$selected_value = '4ft 5in - 134cm';
echo get_option('4ft 5in - 134cm', $selected_value);
echo get_option('4ft 6in - 137cm', $selected_value);
//etc, etc

【讨论】:

    【解决方案4】:

    您可以将所有项目放在一个数组中,并使用 for(或 foreach)循环动态生成列表。然后只需在此循环中检查您的循环变量是否等于您的值,如果是,则分配选定的属性。

    类似这样的:

    <select name="height" id="height">
        <option value="" label="Select">Select Height</option>
        <?php
        $options = array("4ft 5in - 134cm", "4ft 6in - 137cm", "4ft 7in - 139cm", /* and all your other options ... */);
        $yourvalue = "4ft 6in - 137cm"; // or any valid entry
        foreach($options as $option) {
            echo '<option value="'.$option.'" label="'.$option.'" '. ($option == $yourvalue ? 'selected' : '') .'>'.$option.'</option>';
        }
        ?>
    </select>
    

    【讨论】:

    • 在生成的选项元素中动态添加选定属性的非常好的解决方案。谢谢!
    【解决方案5】:

    如果您不想使用 javascript,您将不得不编写您要避免的代码。

    <? $selected = "6ft 10in - 208cm"; ?>
    <select name="height" id="height">
      <option value="" label="Select">Select Height</option>
      <? foreach ( $options as $option ): ?>
        <option value="<?= $option; ?>" <?= ($option == $selected ? "selected" : ""); ?> ><?= $option; ?></option>
      <? endforeach; ?>
    </select>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-09-28
      • 1970-01-01
      • 2021-10-03
      • 2020-07-31
      • 2023-03-14
      • 1970-01-01
      • 2011-12-01
      • 2021-06-24
      相关资源
      最近更新 更多