时间戳

首页 > 解决方案 > 自动更改浏览器时更改大小

jquery - 自动更改浏览器时更改大小

问题描述

美好的一天我是 Jquery 语言的新手，任何人都可以帮助我解决我的问题。现在，它需要刷新页面才能应用大小的更改，但我想在浏览器自动调整大小而不刷新页面时更改选择选项的大小值。

<select data-drupal-selector="edit-keyword" multiple="multiple" name="keyword[]" id="edit-keyword" class="form-select"
            onchange="if(this.value != 0) { this.form.submit(); }" size="10" style="height: 100%;">
            <option class="filter-item br-8 f-14-med" value="211">AI</option>
            <option class="filter-item br-8 f-14-med" value="176">Carbon Capture</option>
            <option class="filter-item br-8 f-14-med" value="186">Clean energy</option>
            <option class="filter-item br-8 f-14-med" value="196">COVID-19</option>
            <option class="filter-item br-8 f-14-med" value="216">Digital Twins</option>
            <option class="filter-item br-8 f-14-med" value="201">Digitization</option>
            <option class="filter-item br-8 f-14-med" value="181">Energy Mix</option>
            <option class="filter-item br-8 f-14-med" value="26">Hydrogen</option>
            <option class="filter-item br-8 f-14-med" value="206">IoT</option>
            <option class="filter-item br-8 f-14-med" value="31">Keyword 2</option>
            <option class="filter-item br-8 f-14-med" value="226">LNG</option>
            <option class="filter-item br-8 f-14-med" value="191">Oil ＆Gas</option>
            <option class="filter-item br-8 f-14-med" value="221">Power Plant</option>
        </select>

CSS：

.form-select {
  display: inline-block;
  width: 100%;
  text-align: center;
  white-space: pre-line;
  overflow-y: unset;
}

.form-select  option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
  }

  .form-select  option:hover {
    background: lightblue;
}

.form-select select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
  }

脚本：

$("select[multiple]").each(function() {
    if(window.matchMedia("(max-width: 767px)").matches){
        // The viewport is less than 768 pixels wide

        var size = Math.round(parseFloat((this.length/2))+ parseFloat((this.length/2))/2);
    } else{
        var size = parseFloat((this.length/10).toFixed())+parseFloat((this.length/10).toFixed());
    }
    $(this).css("height","100%")
    .attr("size",size);
    });

标签： jquery

解决方案

您可以使用 JQuery .resize()方法。我修改了您的脚本，以便在调整窗口大小时自动调用选项函数。

代码写在下面：-

$(window).resize(function(){
    $("select[multiple]").each(function() {
        if(window.matchMedia("(max-width: 767px)").matches){
            // The viewport is less than 768 pixels wide
    
            var size = Math.round(parseFloat((this.length/2))+ parseFloat((this.length/2))/2);
        } else{
            var size = parseFloat((this.length/10).toFixed())+parseFloat((this.length/10).toFixed());
        }
        $(this).css("height","100%")
        .attr("size",size);
    });
});

推荐阅读