php - 将文本内容添加到第一个选项然后应用 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 输出:

<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> .设计是让观众依次选择下拉过滤器；因此我们需要将数字 1,2 和 3 添加到 3 <select> 中的第一个选项中如下图所示。

我了解到我们无法通过 CSS 做到这一点。我们如何将数字 1、2 和 3 分别添加到每个 <select> 中？在 JavaScript 中？

Answer 1

在选择上 float 一个跨度。 CSS + jQuery 解决方案。

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();  
  }
  
});

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;
}

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