如何在选项下拉字段中添加占位符

Question

我试图在下拉字段中放置一个无法选择作为选项的占位符。我尝试将 placeholder="" 添加到选项标签，但它不起作用 - 我也尝试将“selected="selected”添加到选项，但我只看到“我正在寻找”作为下拉列表中的选项。我希望这是占位符，这样我就可以将其切换为“任何”。有人知道如何做到这一点吗？ <?php    $array = OSF_Custom_Post_Type_Portfolio::getInstance()->get_all_meta_field_value(); ?> <div class="search-project">                <form action="<?php echo get_post_type_archive_link('osf_portfolio'); ?>" method="get">                    <div class="d-flex justify-content-center project-group">                                          <div class="project-inner">                       <select name="osf_portfolio_type">                                <option value="" selected="selected"><?php echo esc_html__('Im Looking For', 'rehomes'); ?></option>                                <?php                                foreach ($array['osf_portfolio_type'] as $item) {                                    ?>                                    <option value="<?php echo esc_attr($item); ?>" <?php echo esc_attr($item == $_GET['osf_portfolio_type'] ? 'selected' : ''); ?>><?php echo esc_html($item); ?></option>                                    <?php                                }                                ?>                            </select>                        </div>                        <div class="project-inner">              <select name="osf_portfolio_location">                                <option value=""><?php echo esc_html__('Location', 'rehomes'); ?></option>                                <?php                                foreach ($array['osf_portfolio_location'] as $item) {                                    ?>

Answer 1

有一种方法可以放置看起来像占位符的内容。由于selected它显示为默认值，因此disabled无法选择它作为选项或要发送的值。

<h1>fake placeholder in a select</h1>

<select>

  <option selected disabled>fake placeholder</option>

  <option value="1">one</option>

  <option value="2">two</option>

  <option value="3">three</option>

  <option value="4">four</option>

 </select>

Answer 2

HTML placeholder 属性指定描述预期值的简短提示，并且只能在输入标记和文本区域中使用。无法将占位符放入选项标记内。您可以创建一个没有值的附加选项标签，并且始终选择作为参考，就像占位符一样。

 <div class="search-project">

    <form action="" method="get">

        <div class="d-flex justify-content-center project-group">

            <div class="project-inner">

                <select name="osf_portfolio_type">

                    <option value="" selected="selected">Red</option>

                    <option value="">Blue</option>

                </select>

            </div>

            <div class="project-inner">

                <select name="osf_portfolio_location">

                    <option value="">White</option>

                    <option value="">Black</option>

                </select>

            </div>

            <div class="project-inner align-self-end">

                <button type="submit" class="btn btn-primary btn-block" style="color:white;background-color: black;">

                    Search

                </button>

            </div>

       </div>

   </form>

</div>