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

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>&nbsp; <option selected disabled>fake placeholder</option>&nbsp; <option value="1">one</option>&nbsp; <option value="2">two</option>&nbsp; <option value="3">three</option>&nbsp; <option value="4">four</option>&nbsp;</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>