선택 메뉴의 일부 옵션을 "선택 불가능"으로 설정

선택 메뉴의 일부 옵션을 "선택 불가능"으로 설정

---

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사용자가 아래 가지 중 하나를 선택해야한다, 그래서이 선택되지 않지만?

---

아마도 다음을 찾고 계실 것입니다 <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>요소를 선택 disabled불가능 하게 만들어야 하는 경우 속성을 부여 할 수 있습니다 (부울 속성이므로 값은 전혀 중요하지 않음).

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

---

나는 귀하의 질문에서 내 이전 답변이 실제로 찾고있는 것이 무엇인지 알 수 있지만 비슷한 답변을 찾고있는이 StackOverflow 질문에 오는 미래의 사람들을 위해 단순히 옵션에 'Disabled'를 입력 할 수 있습니다.

<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 데모

---

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>

---

From : 기본적으로 비활성화 HTML 선택 옵션을 표시하는 방법은 무엇입니까?

이것은 같은 일을하는 또 다른 방법입니다.

편집 : (이제 여기서 실행할 수 있습니다)

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none">Select One</option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

---

이 작업을 수행 할 수있는 많은 옵션이 있습니다. Chosen이라는 jquery 플러그인을 권장합니다.

다음과 같습니다.

<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/

참조 URL : https://stackoverflow.com/questions/17316540/make-some-options-in-a-select-menu-unselectable