드롭 다운 확장 옵션 선택

Question

음 드롭 다운을 시도하고 있습니다. U는 패키지 번호를 검색해야하며 자세한 정보를 얻을 수 있으므로 해당 패키지의 정확한 가격이나 크기를 즉시 볼 수 있습니다.

  <div class="choosePackage"> 
      <label> 
       <span>Package nr</span> 
       <span>m3</span> 
       <span>Size LxWxH</span> 
       <span>Price</span> 
       <span>Discount</span> 
      </label> 
      <select> 
       <option value=""> 
        <span class="optPackage"><strong>5528</strong></span> 
        <span class="optM3">9m3</span> 
        <span class="optLWH">1.00x2.00x3.40m</span> 
        <span class="optPrice">€70,00</span> 
        <span class="optDiscount">€280,00</span> 
       </option> 
      </select>   
     </div> 

이렇게 만들었지 만 옵션을 분할 할 수 없습니다.

This is what I want to achieve

Answer 1

것은 나는 해결책 작업하지만, 회의에 실행해야했다. 그러나 이것은 당신에게 기본적인 아이디어를 줄 것입니다. 기본적으로 JS를 사용하여 실제 드롭 다운에 링크되는 styled dropdown을 오버레이해야합니다. 그러면 각 옵션마다 다른 스타일로 스타일을 지정할 수 있습니다.

시작 당신의 하락을 작성하여 아래 선택

당신은, 이론적으로 내려

<select id="selectbox1"> 
    <option value="">Select an option&hellip;</option> 
    <option value="basic">$100 Basic Package 3 Months</option> 
    <option value="upgraded">$500 Upgraded Package 6 Months</option> 
    <option value="expert">$1000 Expert Package 12 Months</option> 
</select> 

그럼 당신을 한 방울로 모든 텍스트를 만들고 싶어 자바 스크립트

사용 농구를 통해 이동합니다

옵션을 캐시 한 다음 스타일을 표시하도록 선택을 숨기기 div.

// Cache the number of options 
    var $this = $(this), 
     numberOfOptions = $(this).children('option').length; 

// Hides the select element 
$this.addClass('s-hidden'); 

// Wrap the select element in a div 
$this.wrap('<div class="select"></div>'); 

// Insert a styled div to sit over the top of the hidden select element 
$this.after('<div class="styledSelect"></div>'); 

// Cache the styled div 
var $styledSelect = $this.next('div.styledSelect'); 

// Show the first select option in the styled div 
$styledSelect.text($this.children('option').eq(0).text()); 

지금 당신은 당신의 스타일 사업부를 캐시하려면, 당신의 사업부에 몇 가지 하위 요소를 추가합니다

// Cache the styled div 
    var $styledSelect = $this.next('div.styledSelect'); 

    // Show the first select option in the styled div 
    $styledSelect.text($this.children('option').eq(0).text()); 

    // Insert an unordered list after the styled div and also cache the list 
    var $list = $('<ul />', { 
     'class': 'options' 
    }).insertAfter($styledSelect); 

    // Insert a list item into the unordered list for each select option 
    for (var i = 0; i < numberOfOptions; i++) { 
     $('<li />', { 
      html: $this.children('option').eq(i).text() 
      .split(' ').join(' <span style="color: red; font-weight:100;">'), 
       rel: $this.children('option').eq(i).val() 
     }).appendTo($list); 
    } 

    // Cache the list items 
    var $listItems = $list.children('li'); 

당신은 당신의 하락의 특정 부분에 스타일을 추가하기 위해 for loop를 사용하는 것이 좋습니다

하위. I have a basic mock up for you to check out as well.