将文本内容添加到第一个选项然后应用css样式

Question

我正在为Magento定制零件查找器扩展，以下是我目前的代码：

<ul class="amfinder-toggle">
  <?php foreach ($this->getFinder()->getDropdowns() as $dropdown): ?>
  <li>
    <div class="dropdown-element amshopby-clearer">
      <select <?php echo $this->getDropdownAttributes($dropdown)?>">

      
        <option>                        
          Select <?php echo $this->__($this->htmlEscape($dropdown->getName())) ?>
        </option> 
          <?php foreach($this->getDropdownValues($dropdown) as $v): ?>
        <option value="<?php echo $v['value'] ?>"<?php if ($v['selected']):?>selected="selected"<?php endif ?>>
          <?php echo $this->htmlEscape($v['label']) ?>
        </option>
        <?php endforeach ?>

    
       </select>
    </div>
  </li>
  <?php endforeach ?>
<ul>

HTML OUTPUT：

<ul class="amfinder-toggle">
    <li>
		<div class="dropdown-element amshopby-clearer">
			<select name="finder[56]" id="finder-3--56" "="">
				
				<option>Select Year</option> 
				<option value="0">Please Select ... </option>
				
				<option value="13">1989</option>
				<option value="18">1990</option>
				<option value="19">1991</option>
				<option value="20">1992</option>
				
				
			</select>
		</div>
    </li>
    <li>
		<div class="dropdown-element amshopby-clearer">
			<select name="finder[57]" id="finder-3--57" disabled="disabled" "="">
				<option>Select Make</option> 
			</select>
		</div>
    </li>
	<li>
		<div class="dropdown-element amshopby-clearer">
			<select name="finder[58]" id="finder-3--58" disabled="disabled" "="">	
				<option>Select Model</option> 
			</select>
		</div>
	</li>
                    
</ul>

我有3个<li>和<select>。设计是让观众按顺序选择下拉滤波器;因此，我们需要在3 <select>内的第一个选项中添加数字1,2和3，如下图所示。

我了解到我们无法通过CSS实现这一目标。 我们如何在Javascript中的每个<select>中分别添加数字1,2和3？

Answer 1

在选择范围内浮动一个范围。 CSS + jQuery解决方案。

＆＃13;

＆＃13;

var openSelect = function(selector){
     var element = $(selector)[0], worked = false;
    if (document.createEvent) { // all browsers
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    } else if (element.fireEvent) { // ie
        worked = element.fireEvent("onmousedown");
    }
    if (!worked) { // unknown browser / error
        alert("It didn't worked in your browser.");
    }   
}

$('.title').click(function(){
  
  var sel = $(this).next('select');
  sel.click();
  openSelect( sel );

});

$('.select').click(function(){
  
  var curval = $(this).val();
  if(curval === '')
  {
   $(this).find('option').eq(0).hide();
  }
  else
  {
   $(this).find('option').eq(0).show();
  }
});


$('.select').change(function(){
  var curval = $(this).val();
  if(curval != '')
  {
   $(this).prev('span').hide();
  }
  else
  {
   $(this).prev('span').show();  
  }
  
});

＆＃13;

ul{
   list-style: none; 
}

ul li{
    display: inline-block; 
}

.dropdown-element{
  position: relative;
  height: 30px;
}

.title{
  position: absolute;
  background: #fff;
  cursor: default;
  top: 5px;
  left: 5px;
}

.select{
   height: 30px;
   width: 150px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="amfinder-toggle">
    <li>
		<div class="dropdown-element amshopby-clearer">
            <span class='title'> <span class="badge">1</span> Select Year </span>
			<select name="finder[56]" class='select' id="finder-3--56" "="">
				
				<option value="">Select Year</option>
				
				<option value="13">1989</option>
				<option value="18">1990</option>
				<option value="19">1991</option>
				<option value="20">1992</option>
				<option value="21">1993</option>
				<option value="22">1994</option>
				<option value="23">1995</option>
				<option value="24">1996</option>
				
			</select>
		</div>
    </li>
    <li>
		<div class="dropdown-element amshopby-clearer">
            <span class='title'> <span class="badge">2</span> Select Make </span>
			<select name="finder[57]" class='select' id="finder-3--57" disabled="disabled" "="">
				<option value=""> </option> 
			</select>
		</div>
    </li>
	<li>
		<div class="dropdown-element amshopby-clearer">
            <span class='title'> <span class="badge">3</span> Select Model </span>
			<select name="finder[58]" class='select' id="finder-3--58" disabled="disabled" "="">
				<option value=""> </option> 
			</select>
		</div>
	</li>
                    
</ul>

＆＃13;

＆＃13;

＆＃13;