html - jquery placeholder select




「選択」ボックスのプレースホルダを作成するにはどうすればよいですか? (16)

私はちょうどうまく動いているテキスト入力のプレースホルダを使用しています。 しかし、私はセレクトボックスのためのプレースホルダーも使いたいと思っています。 Ofcourse私はちょうどこのコードを使用することができます:

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

しかし、あなたのオプションを選択することは、ライトグレイではなく黒で表示されます。 だから、私の解決策はCSSベースである可能性があります。 jQueryも問題ありません。

これにより、ドロップダウンのオプションが灰色になります(矢印をクリックした後)。

option:first {
    color: #999;
}

編集:質問は:人々はどのようにプレースホルダをセレクトボックスで作成するのですか? しかしそれは既に答えられている、歓声。

これを使用すると、選択した値が常にグレーで表示されます(実際のオプションを選択しても)。

select {
    color:#999;
}

HTMLのみを使用してJavascriptを使用せずにこれを行うことができます。デフォルトの選択オプションdisabled=""およびselected=""を設定し、 required="".タグを選択するrequired="".ありますrequired="". ブラウザでは、オプションを選択せず​​にフォームを送信することはできません。

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>

Input [type="text"]選択要素のスタイルプレースホルダ

次のソリューションは、 input[type="text"]要素に関連するプレースホルダをシミュレートしinput[type="text"]

$( '.example' ).change( function ()
{
    $( this ).css( 'color', $( this ).val() === '' ? '#999' : '#555' );
});
.example { color:#999; }
.example > option { color:#555; }
.example > option[value=""] { color:#999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
    <option value="">Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


JSやCSSは必要ありません.3つの属性しかありません。

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

オプションを表示しない場合は、オプションの値をデフォルト値に設定するだけです。

ただし、 残りの部分と同じ色のプレースホルダが気に入らない場合は、次のようにインラインで修正できます。

<!DOCTYPE html>
<html>
<head>
<title>Placeholder for select tag drop-down menu</title>
</head>

<body onload="document.getElementById('mySelect').selectedIndex = 0">

<select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"  style="color: gray; width: 150px;">
  <option value="" hidden>Select your beverage</option> <!-- placeholder -->
  <option value="water" style="color:black" >Water</option>
  <option value="milk" style="color:black" >Milk</option>
  <option value="soda" style="color:black" >Soda</option>
</select>

</body>
</html>

明らかに、関数と少なくともselectのCSSを別々のファイルに分けることができます。

注意: onload関数はリフレッシュのバグを修正します。


ここでは、美しく動作するCSSソリューションを紹介します。 コンテンツは、包含要素の後に追加されます(そして、コンテナに対して絶対的に配置されます:via:after擬似クラス )。 これは、私がディレクティブ( attr(プレースホルダ) )を使用した場所で定義したプレースホルダ属性からテキストを取得します。 もう一つの重要な要素はポインタイベントです:none - これは、プレースホルダーテキストのクリックを選択に渡すことを可能にします。 それ以外の場合は、ユーザーがテキストをクリックしてもドロップされません。

私は選択したディレクティブで.ememyクラスを自分自身に追加しますが、通常は、角度の追加/削除は.ng-emptyです(私はb / cだと思います。コードサンプルにAngularのバージョン1.2を注入しています)

(このサンプルでは、​​独自のカスタム入力を作成するためにangularJSのHTML要素をラップする方法も示しています)

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;

  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;

    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }

    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }

  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }

});
so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>


ここに私の貢献があります。 HAML + Coffeescript + SCSS

HAML
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
Coffeescript
  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()
SCSS
select option {
  color: black;
}

CSSのみを使用することは可能ですが、サーバーコードを変更し、プロパティの現在の値に応じてクラススタイルを設定するだけですが、この方法は簡単でクリーンな方法です。

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

開いたときにプレースホルダを灰色に保つために、さらにCSS( select option:first-child )を追加select option:first-childが、それについては気にしませんでした。


ここは私です

select:focus option.holder {
  display: none;
}
<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>


このように角度を使用している場合

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>


そのソリューションはFireFoxでも動作します:
JSなし。

option[default] {
  display: none;
}
<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>


どのように非CSSについて - いいえjavascript / jQueryの答えは?

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


ユーザーは選択オプションでプレースホルダを表示しないでください。 私は、プレースホルダーオプションのhidden属性を使用することをお勧めします。このオプションの属性をselectedする必要はありません。

select:not(:valid){
  color: #999;
}
<select required>
        <option value="" hidden>Select your option</option>
        <option value="0">First option</option>
        <option value="1">Second option</option>
    </select>


必要な分野については、現代のブラウザには純粋なCSSソリューションがあります。

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}
<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>


私には、(1)必須ではなく、(2)デフォルトの選択可能に戻すオプションが必要であるため、これらのいずれも現在動作することができませんでした。 jqueryを使用している場合、ここでは重い手のオプションがあります:

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')){
          $(this).css('color','#999');
  }
  else{
          $(this).css('color','#555');
  }
});

$selects.each(function(){
  $(this).change();
});
option{
    color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>


私はこのHTMLのために選択されるまでSELECTが灰色であることを望んでいました:

<select>
  <option value="" disabled selected>Select your option</option>
  <option value="hurr">Durr</option>
</select>

私はこれらのCSS定義を追加しました:

select { color: grey; }
select:valid { color: black; }

それはクロム/サファリ、おそらく他のブラウザでも期待どおり動作しますが、私はチェックしていません。


私はちょうど以下のようなオプションで隠し属性を追加しました。それは私のためにうまくいきます。

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>


私は正解の兆候が見えますが、それをまとめてみるとこれが私の解決策になります。

select{
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}
<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>


上記のすべてのソリューションに関して、これはHTML仕様のために最も有効であるようです:

<select>
  <optgroup label="Your placeholder">
    <option value="value">Label</option>
  </optgroup>
</select>

更新:私はこの間違った答えのために私を許し、これは間違いなくselect要素のプレースホルダソリューションではなく、 select要素リストを開いた状態でグループ化されたオプションのタイトルです。





placeholder