选择 Harvesthq 动态调整宽度答案

【问题标题】：Chosen harvesthq resize width dynamically选择 Harvesthq 动态调整宽度
【发布时间】：2013-06-02 09:05:27
【问题描述】：

你怎么能有一个具有动态宽度样式的 Harvethq Chosen 下拉菜单？

默认情况下它有一个固定的宽度，如果你尝试用 CSS 修改它，你会遇到几个问题来达到一个好的结果。

【问题讨论】：

标签： jquery drop-down-menu width jquery-chosen

【解决方案1】：

This blog 建议如下：

$("select").chosen({ width: '100%' }); // width in px, %, em, etc

【讨论】：

我有那个设置，但它不会根据容器调整大小：stackoverflow.com/questions/26425643/…
此设置不适应动态宽度，除非您重新加载页面。它没有响应。
我认为调整 ChosenSelect 大小的问题在于，大小首先是在 javascript 中处理的。我强烈建议尽可能控制 CSS 中的宽度（在这种情况下是可能的）。
感谢stackoverflow.com/users/2327634/vinay-raghu 的博客。我发现的这个解决方案已有几年的历史，因此请查看选择的文档以获取更多信息。但它所做的只是将其宽度设置为 100% 内联。当然，根据 Tormod 的评论，它所在的任何容器都需要对此做出响应。

【解决方案2】：

这个对我有用，即使屏幕上有多个选择框：

$(document).ready(function(){      
   resizeChosen();
   jQuery(window).on('resize', resizeChosen);
});

function resizeChosen() {
   $(".chosen-container").each(function() {
       $(this).attr('style', 'width: 100%');
   });          
}

2019 年。编辑：请记住，这个答案是 4 年前提出的，当时 jQuery 是流行的库并且被广泛使用。我的建议是对今年之后的所有内容都使用纯 JS。不要否定在编写它们时有效的代表历史答案。

【讨论】：

一行$(window).on("resize", function() { $(".chosen-container").each(function() { $(this).attr("style", "width: 100%"); }); });

【解决方案3】：

我只想分享我的解决方案，了解如何在屏幕调整大小时调整所选下拉宽度：

首先你必须在你的 CSS 中添加这个样式：

#form_paciente{
    width: 100% !important;
}

其中 *#form_paciente* 是您的选择 ID。

然后在你的视图上添加这个脚本：

window.addEventListener("resize", function() {
    $('.chzn-container').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth());
    $('.chzn-search input').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-12);
    $('.chzn-drop').innerWidth($('#selecciona_paciente_estadisticas_form').innerWidth()-2);  
}, false);

在这种情况下，*#selecciona_paciente_estadisticas_form* 是 *#form_paciente* 的表单父 ID

就是这样！

【讨论】：

你有什么解决办法吗？ stackoverflow.com/questions/26425643/…
@SearchForKnowledge：也许删除选定的 Dom 并重新附加（请参阅下面的答案）对您有用？

【解决方案4】：

虽然上面提到了一部分，但我想指出以下解决方案：

.chosen-container {
    width: 100% !important;
}

这样，您选择的小部件将始终为 100%，并相应地调整大小。如果您需要将其设置为其他宽度，请更改百分比或用另一个元素封装选择本身，然后在该元素上设置宽度。

【讨论】：

【解决方案5】：

我有一个响应式表单，其中有很多带有媒体查询的 CSS 规则、!important 等，并且使用了类继承选项。在调整大小时，选择的 css 和父 css 之间经常会发生冲突，并且事情会中断。我想出了一个对我有用的简单解决方案：在每次调整窗口大小时重新创建选定的 dom：

jQuery(document).ready(function() {
        doResize();
        jQuery(window).on('resize', doResize);
});


function doResize() {
     // Parent website's code, that would also reorganize select elements on the page
    jQuery("select.my-select").removeAttr("style"); // Remove display:none style added by chosen
    jQuery("select.my-select").removeClass("chzn-done"); // Remove chzn-done class added by chosen

    jQuery(".chzn-container").remove();
    jQuery("select.my-select").chosen({
                 width: '100%',
                 disable_search_threshold: 10,
                 inherit_select_classes : true
               });
}

【讨论】：

【解决方案6】：

在@MSánchez 的回答的基础上，我写了以下更通用的内容，而不涉及任何 ID：

function processChosenContainer(myme) {
    myme.innerWidth(myme.parent().innerWidth() - 30);
}

function processChosenSearch(myme) {
    myme.innerWidth(myme.parent().parent().parent().innerWidth() - 13);
}

function processChosenDrop(myme) {
    myme.innerWidth(myme.parent().parent().innerWidth() - 32);
}

window.addEventListener("resize", function () {
    //******Adjust Container Width********/
    var myObj = $('.chosen-container');
    myObj.each(function () {
        processChosenContainer($(this));
    });
    //******Adjust input search Width********/
    var myObj2 = $('.chosen-search input');
    myObj2.each(function () {
        processChosenSearch($(this));
    });
    //******Adjust drop Width********/
    var myObj3 = $('.chosen-drop');
    myObj3.each(function () {
        processChosenDrop($(this));
    });
}, false);

在选择元素中添加“chosen-select-responsive”，如下：

.chosen-select-responsive {
width: 100% !important;
}

再说一次，这只是 MSánchez 的回答的基础！谢谢

【讨论】：

【解决方案7】：

我正在用 MVC5 做一个应用程序。

这是我所做的：

在我添加的.chosen-container 类中


    width: 100% !important; // Assume that it is already 100%
    max-width: 280px; // It is the max-width of bootsrap form-control-class
    min-width: 0px; // It can go to 0

它可以从 0 到 280 像素，我假设宽度是 100%。

这完全符合我的要求。

【讨论】：

【解决方案8】：

只需在单引号内使用百分比宽度：

<select chosen width="'100%'" ... ></select>

可以在此处查看使用此技术选择的响应式：http://plnkr.co/edit/RMAe8c?p=preview

【讨论】：

【解决方案9】：

这就是我这样做的简单原因。

JS：

// Create Chosen Select Menus
setUpSelectMenus();

// Reset Chosen Select Menus when window changes size
window.addEventListener( "resize", function() { setUpSelectMenus(); } );

/**
 * Settings for Default Chosen Select Menus
 */
function setUpSelectMenus(){

    $( '.chosen-select' )
        .chosen( "destroy" ) // Need this to make responsive
        .chosen(
            {
                allow_single_deselect   : true,
                disable_search_threshold: 10
            }
        );
}

【讨论】：

【解决方案10】：

我使用的方式是使用inherit_select_class。

HTML

<select class="input-xxlarge" />

JS

jQuery("[data-chosen]").chosen({
  inherit_select_classes : true
});

CSS

.input-xxlarge {
  width:530px;
  max-width: 100%;
}

【讨论】：

请将 data-chosen 属性放入 html 中以使其可运行。

【解决方案11】：

我用这个快速的片段修复了

	$(window).resize(function() {
		$(".chosen-select").chosen('destroy') ;
		$(".chosen-select").chosen() ;
	});

当然，还有更优雅的方式来处理它。但它有效。

【讨论】：

【解决方案12】：

对我来说，它真正起作用的是：

function resizeChosen() {
    var chosen = $("#dropdown_chosen");
    var max = chosen.parent().width();
    var currentWidth = chosen.width();
    var now = currentWidth + 20 / 100 * currentWidth;

    if (now <= max) {
        $("#dropdown_chosen").attr('style', "width: " + now + "px");
    }
}

在document.ready里面

dropdown.chosen().change(function() {
    resizeChosen();
});

其中 dropdown 是下拉列表的 id。您还可以在更改事件时设置宽度减小。 #dropdown_chosen 是通过以下方式创建的：

dropdown - 您的下拉列表 ID 追加_选择

【讨论】：