Question

我需要实现像this这样的自定义选择框。如何通过以下代码转换为。这是我目前的工作fiddle

＆＃13;

localhost

＆＃13;

提前致谢。

Fiddle

Answer 1

为此你可以这样做，在这里它将在大屏幕上显示列表，如果是小屏幕，它将切换到选择框。

  <ul id="make-select-box">
     <li><a href="#i-bc"> 1 </a></li>
     <li><a href="#i-st"> 2 </a></li>
     <li><a href="#i-mm"> 3 </a></li>
     <li><a href="#i-cc"> 4 </a></li>
  </ul>

  <select class="toggle-view">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>

在CSS中

   .toggle-view {
      display : block;
    }
   #make-select-box {
       display : none;
    }

   @media screen and (min-width: 480px) {
     .toggle-view {
         display : none;
      }
     #make-select-box {
         display : block;
      }
    }

或者如果你想通过javascript（动态）这样做，那么你可以使用下面的代码，

   var sel = $('<select id="tesing2"/>');
   onResize = function() {
   if($(window).width() < 480) {
       $('#make-select-box li').each(function(){
       sel.append('<option value='$(this).children('a').attr('href')'>'+this.innerHTML+'</option>')
        })
       $('#make-select-box').replaceWith(sel);
    } 
    $('select').on('change', function() {
     var url = this.value;
     window.location = this.value;
    })

  }

  $(document).ready(onResize)

祝你好运：）

Answer 2

HTML：

<span id='selected_val'></span>
<ul id="make-select-box" >
   <li><a href="#i-bc" onClick='toggleDropDown(1)'> 1 </a></li>
   <li><a href="#i-st" onClick='toggleDropDown(2)'> 2 </a></li>
   <li><a href="#i-mm" onClick='toggleDropDown(3)'> 3 </a></li>
   <li><a href="#i-cc" onClick='toggleDropDown(4)'> 4 </a></li>
</ul>

JS：

var selectval;
function renderDropDown(){
  $('#make-select-box').css('display', 'none');
  if(selectVal == undefined){
    document.getElementById('selected_val').innerHTML = 1;
  }
}
renderDropDown()

切换下拉列表

var selectval
function toggleDropDown(arg){
  selectVal = arg;
  document.getElementById('selected_val').innerHTML = arg;
  $('#make-select-box').toggle();

}

将列表转换为低于480px的选择框，包括其锚点

2 个答案: