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

Question

你好，我是Jquery语言的新手，有人能帮我解决我的问题吗？现在，它需要刷新页面才能应用大小更改，但我想在浏览器自动调整大小而不刷新页面时更改select选项的大小值。

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

Answer 1

看看用于jquery的resize event

当窗口大小改变时，它会触发，因此您可以尝试如下所示：

$(document).resize(function(){
    // Your function here
});

Answer 2

您可以使用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);
    });
});