html - bootstrap - اجعل بعض الخيارات في قائمة تحديد "غير قابلة للاختيار"




select option php (4)

لدي عنصر select يحتوي على عدد قليل من الخيارات ، لكنني أريد أن يكون بعض الخيارات غير قابل للتحديد.

أساسا مثل هذا:

<select>
    <option> CITY 1 </option>
    <option> City 1 branch A </option>
    <option> City 1 branch B </option>
    <option> City 1 branch C </option>
    <option> CITY 2 </option>
    <option> City 2 branch A </option>
    <option> City 2 branch B </option>
    ...
</select>

لذلك كما ترون ، لا أريد أن تكون المدن قابلة للتحديد مباشرة ، ولكن فقط الخيارات التي تأتي تحت كل مدينة.

كيف يمكن القيام بذلك بحيث يمكن للمستخدم النقر فوق CITY 1 أو CITY 2 ولكن لن يتم تحديده ، لذلك يضطر المستخدم إلى اختيار أحد الفروع الموجودة أسفله؟


أستطيع أن أرى من سؤالك أن الإجابات السابقة على إجابتي هي في الواقع ما تبحث عنه ، ولكن فقط لأشير إلى أشخاص في المستقبل يأتون إلى سؤال على حد سواء وأنا أبحث عن إجابة مماثلة يمكنهم ببساطة كتابة "معطل" في خيار.

<select>
  <option value="apple" disabled>Apple</option>
  <option value="peach">Peach</option>
  <option value="pear">Pear</option>
  <option disabled="true" value="orange">Orange</option>
</select>

JSFiddle Demo


ربما تبحث عن <optgroup> :

<select>
    <optgroup label="CITY 1">
        <option>City 1 branch A</option>
        <option>City 1 branch B</option>
        <option>City 1 branch C</option>
    </optgroup>

    <optgroup label="CITY 2">
        <option>City 2 branch A</option>
        <option>City 2 branch B</option>
    </optgroup>
</select>

العرض التوضيحي: http://jsfiddle.net/Zg9Mw/

إذا كنت بحاجة إلى جعل عناصر <option> العادية غير قابلة <option> ، فيمكنك منحهم السمة disabled (إنها سمة منطقية ، لذلك لا يهم القيمة على الإطلاق):

<option disabled>City 2 branch A</option>

هناك الكثير من الخيارات لتحقيق ذلك ، أوصي ببرنامج إضافي من jquery باسم Chosen:

سيكون مثل:

<select data-placeholder="Choose a Country..." class="chosen-select chose-select-width-custom" multiple tabindex="4" name="countryDigestValues">                                             <option value=""></option>                                                                  
  <optgroup class="custom-optgroup-class" label="Label Title">  
     <option class="custom-option-class">Here goes the option to select</option>                                                                          
  </optgroup>
 </select>

هنا هو الرابط ، https://harvesthq.github.io/chosen/


jsFiddle Demo

يمكنك استخدام <optgroup>

<select>
 <optgroup label="City 1">
  <option>City 1 Branch A</option>
  <option>City 1 Branch B</option>
  <option>City 1 Branch C</option>
 </optgroup> 
 <optgroup label="City 2">
  <option>City 2 Branch A</option>
  <option>City 2 Branch B</option>
 </optgroup>
</select>




html-select