javascript - 单击主选择框时如何自动打开第二个选择框？

Question

我有两个重叠（100% 重叠）的选择下拉菜单，我希望能够单击一个与可打开的选择下拉菜单重叠的下拉菜单，同时触发另一个选择下拉菜单以打开选项列表。我已经看到引用这是不受支持的，如果是这样，我需要一种解决方法来获得选项以保留覆盖选择的值，同时仅打开第一个选择框 z-index 小于第一个选择框。

我该如何完成这个要求？

小提琴

https://jsfiddle.net/0rgthvub/

HTML

<select class="long-select" style="background-color:white; position: absolute !important; width: 200px; z-index: 10 !important;" onmousedown="(function(event){processOpen(event);})(event, this)">
  <option value="Open - some description" selected></option>
</select>

JavaScript/jQuery

function processOpen(e) { 
    e.preventDefault();
    $input = $("select.shortened-select");
    var $this = $(this);
  if ($input.is("select") && !$('.lfClon').length) {
        var $clon = $input.clone();
        var getRules = function(e){ return {
            position: 'absolute',
            left: e.offset().left,
            top: e.offset().top,
            width: e.outerWidth(),
            height: e.outerHeight(),
            opacity: 0,
            margin: 0,
            padding: 0
        };};
        var rules = getRules($this);
        $clon.css(rules);
        $clon.on("mousedown.lf", function(){
            debugger;
            $clon.css({
                marginLeft: $input.offset().left - rules.left,
                marginTop: $input.offset().top - rules.top,
            });
            $clon.on('change blur', function(){
                $input.val($clon.val()).show();
                $clon.remove();
            });
            $clon.off('.lf');
        });
        $clon.on("mouseout.lf", function(){
            $(this).remove();
        });
        $clon.prop({id:'',className:'lfClon'});
        $clon.appendTo('body');
    }
  

  value = document.querySelectorAll(".shortened-select option")[document.querySelector(".shortened-select").selectedIndex].value;
  $input.value = "value";
    $input.value.show();
  
  
}

function focus() {
  [].forEach.call(this.options, function(o) {
    if (o.val === ""){
        o.setAttribute('data-descr', document.querySelectorAll(".shortened-select option")[document.querySelector(".shortened-select").selectedIndex].getAttribute("val"));
      
        o.selected = 'selected';
        }
    else
    {
    o.textContent = o.getAttribute('val');
    }
  });
}
function blur(e) {
  [].forEach.call(this.options, function(o) {
   o.textContent = o.getAttribute('val') + ' - ' + o.getAttribute('data-descr');
  });
 this.blur();
 }
 function mouseup(e) {
  [].forEach.call(this.options, function(o) {
   o.textContent = o.getAttribute('val') + ' - ' + o.getAttribute('data-descr');
  });
 }



[].forEach.call(document.querySelectorAll('.shortened-select'), function(s) {
  s.addEventListener('focus', focus);
  s.addEventListener('change', blur);
  blur.call(s);
});

标签： javascripthtmljquery