web-dev-qa-db-ja.com

単一選択用に選択されたプラグインのプレースホルダーテキストが機能しない

コードに実装された単一選択用の選択されたプラグインがあります。検索ボックスにプレースホルダーテキストを追加しようとしていますが、できません。私は次のことを試しました：

<select id="search_pi" name="search_pi" type="text" class="chosen-select"
        style="width:450px;" onchange="this.form.submit()" >

  <option value="">Search Project/Initiative...</option>
  <?php
    include "../includes/search_dropdown.php";
    foreach($proj_ini_Array as $qa){
      echo "<option value = \"$qa\">$qa</option>";
    }
  ?>

JS

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select an option",
      no_results_text: "Oops, nothing found!"
    });  
  });
</script>

選択フィールドで、data-placeholder="Select an option"しかし、それも助けにはなりません。誰かが私に何が欠けているのか教えてもらえますか？

前もって感謝します。

javascriptjquerycssjquery-chosen
17
rond

はい。答えを見つけました。単一選択検索ボックスでプレースホルダーテキストをアクティブにするには、最初のオプションを空白にする必要があります。

<select id="search_pi" name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >

  <option> </option>
  <?php
    include "../includes/search_dropdown.php";
    foreach($proj_ini_Array as $qa){
      echo "<option value = \"$qa\">$qa</option>";
    }
  ?>

上記の場合、プレースホルダーテキストはデフォルトで「オプションを選択」になります。

単一の検索選択ボックス用にカスタマイズされたプレースホルダーテキストの場合、以下のようにjsファイルを編集し、プレースホルダーテキストを表示するための最初のオプションを空白にすることができます。

<script>
  $(document).ready(function() {
    $('.chosen-select').chosen({
      placeholder_text_single: "Select Project/Initiative...",
      no_results_text: "Oops, nothing found!"
    });  
  });
</script>
32
rond

使用する data-placeholder="YOUR TEXT" in selectタグ

23
Giridhar Shukla

最初のオプションを単なるガイダンステキストにし、ユーザーが選択できないようにするには、次を使用します。

<option selected="selected" disabled>Search Project/Initiative...</option>

*編集*

申し訳ありませんが、最初から質問をはっきりと読んでいませんでした。

どうやら最初の<option>は空である必要があります。 this jsfiddle を参照してください。

4
t0mppa

JSではなくHTML経由で構築する場合、実際にはこの問題に対するより良い/より簡単な解決策があります。あなたは2つのことをしなければなりません。

  1. <option>の最初の<select>は空でなければなりません。
  2. placeholder="Placeholder goes here"に<select>を含める必要があります。どうやらこれはかつてdata-placeholderと呼ばれていましたが、混乱を招いたようです。

したがって、合計で：

<select placeholder="Placeholder goes here">
    <option><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>
1
Zack Jordan

単純にdata-placeholder="YOUR TEXT"を追加できます。同じものに対してjqueryを使用する必要はありません。

例はこちら

<select id="search_pi"  data-placeholder="Select Project/Initiative..." name="search_pi" type="text" class="chosen-select" style="width:450px;" onchange="this.form.submit()" >
              <?php
                include "../includes/search_dropdown.php";
                foreach($proj_ini_Array as $qa){
                  echo "<option value = \"$qa\">$qa</option>";
                }
              ?>
</select>
0
Mr. HK

ユーザーの対応@Zack Joerdanが私の問題を解決しました。したがって、スプリングはオプション内の値を必要としました

<select placeholder="Placeholder goes here">
    <option value=""><!-- Empty option goes here. --><option>
    <option>Other Option</option>
</select>
0
Cleriston Lincoln