it-swarm.asia

عنصر نائب لعلامة الاختيار

هل من الممكن أن يكون لديك عنصر نائب على علامة تحديد؟

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

أو قد يكون العمل ممكن حولها؟

62
Dalton Pereira

تحرير: هذا يعمل/يعمل في الوقت الذي كتبت فيه ، ولكن كما أشار Blexen ، فإنه ليس في المواصفات.

إضافة خيار مثل ذلك:

<option default>Select Your Beverage</option>

الطريقة الصحيحة:

<option selected="selected">Select Your Beverage</option>
37
General_Twyckenham

وفقًا لـ Mozilla Dev Network ، placeholder ليست سمة صالحة في إدخال <select>.

بدلاً من ذلك ، أضف خيارًا يحتوي على value و selected فارغين ، كما هو موضح أدناه. السمة الفارغة value إلزامية لمنع السلوك الافتراضي وهو استخدام محتويات <option> كقيمة <option>.

<select>
    <option value="" selected>select your beverage</option>
    <option value="tea">Tea</option>
    <option value="coffee">Coffee</option>
    <option value="soda">Soda</option>
</select>

في المتصفحات الحديثة ، لن تؤدي إضافة السمة required إلى عنصر <select> إلى السماح للمستخدم بإرسال النموذج الذي يمثل العنصر جزءًا منه إذا كان للخيار المحدد قيمة فارغة.

إذا كنت ترغب في نمط الخيار الافتراضي داخل القائمة (الذي يظهر عند النقر فوق العنصر) ، فهناك عدد محدود من خصائص CSS المدعومة جيدًا. color و background-color هما أكثر الرهانات أمانًا ، ومن المحتمل أن يتم تجاهل خصائص CSS الأخرى.

في خياري ، أفضل طريقة (في HTML5) لوضع علامة على الخيار الافتراضي هي استخدام سمات data-* المخصصة.1 إليك كيفية تصميم الخيار الافتراضي المراد تدوينه:

select option[data-default] {
  color: #888;
}
<select>
  <option value="" selected data-default>select your beverage</option>
  <option value="tea">Tea</option>
  <option value="coffee">Coffee</option>
  <option value="soda">Soda</option>
</select>

ومع ذلك ، لن يؤدي ذلك إلا إلى تصميم العنصر داخل القائمة المنسدلة ، وليس القيمة المعروضة في الإدخال. إذا كنت تريد تصميم ذلك باستخدام CSS ، فاستهدف عنصر <select> مباشرة. في هذه الحالة ، يمكنك فقط تغيير نمط العنصر المحدد حاليًا في أي وقت.2

إذا كنت تريد أن تجعل من الصعب على المستخدم تحديد العنصر الافتراضي ، فيمكنك تعيين قاعدة display: none; CSS على <option> ، لكن تذكر أن هذالن)منع المستخدمين من تحديد (باستخدام مفاتيح الأسهم/الكتابة على سبيل المثال) ، هذا يجعل من الصعب عليهم القيام بذلك.


1 نصحت هذه الإجابة مسبقًا باستخدام سمة default غير القياسية وليس لها معنى من تلقاء نفسها.
2 من الممكن تقنيًا تحديد النمط نفسه استنادًا إلى القيمة المحددة باستخدام جافا سكريبت ، ولكن هذا خارج نطاق هذا السؤال. هذه الإجابة ، ومع ذلك ، تغطي هذه الطريقة.

66
SeinopSys
<select>

    <option selected="selected" class="Country">Country Name</option>

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

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

</select>
.country
{


    display:none;
}

</style>
12
manish mohanan

نعم هذا ممكن

يمكنك القيام بذلك باستخدام HTML فقط. تحتاج إلى تعيين خيار التحديد الافتراضي disabled="" و selected="" وتحديد العلامة 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>
3
Thusitha Wickramasinghe

هذه وظيفتي لاختيار عنصر نائب مربع.

HTML

<select name="country" id="country">
  <option value="" disabled selected>Country</option>
  <option value="c1">England</option>
  <option value="c2">Russia</option>
  <option value="c3">USA</option>
</select>

مسج

     jQuery(function($) {
      /*function for placeholder select*/
      function selectPlaceholder(selectID){
        var selected = $(selectID + ' option:selected');
        var val = selected.val();
        $(selectID + ' option' ).css('color', '#333');
        selected.css('color', '#999');
        if (val == "") {
          $(selectID).css('color', '#999');
        };
        $(selectID).change(function(){
          var val = $(selectID + ' option:selected' ).val();
          if (val == "") {
            $(selectID).css('color', '#999');
          }else{
            $(selectID).css('color', '#333');
          };
        });
      };

      selectPlaceholder('#country');

    });
2
Andrey Kartavtsev

هناك مكون إضافي Select2 يسمح بضبط الكثير من الأشياء الرائعة بجانب العنصر النائب. إنه بديل jQuery لمربعات التحديد. هنا موقع رسمي https://select2.github.io/examples.html

الشيء هو - إذا كنت ترغب في تعطيل خيار البحث الهوى ، يرجى استخدام مجموعة الخيارات التالية.

data-plugin-options='
{ 
    "placeholder": "Select status",
    "allowClear": true, 
    "minimumResultsForSearch": -1
}

لا سيما أنا أحب الخيار allowClear.

شكرا لكم.

1
Yevgeniy Afanasyev

لا حاجة لاتخاذ أي javscript أو أي طريقة يمكنك القيام بها فقط باستخدام html css

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

المغلق

.s
{
    color:white;
        font-size:0px;
    display:none;
}
0
Amitpal Singh