选择风格按在选择下拉标签

代码中的文本大小如下。根据文本大小，我想要更改宽度DIV。就像如果选择选项的最大文本长度大于100则父div的宽度更改为240像素，改变选择标签的宽度。选择风格按在选择下拉标签

<div class="products"> 
    <select> 
    <option>Test 1</option> 
    <option>Test 2</option> 
    <option>Test 3</option> 
    <option>Test Test Test Test Test </option> 
    </select> 
    </div>

的javaScript我试图

jQuery(document).ready(function(){ 

    jQuery('.products select option').each(function(){ 

    var maxLength = jQuery(this).val().length; 
    console.log(maxLength); 

    }); 

    // if max length is greater than 50 then increase the width of the div 250px 


});

例JS Bin

来源

2012-02-28 Wasim Shaikh

一个选择框的绘制机制，它在默认情况下采取的最大长度。假设在你的例子中当选择框找到“测试测试测试”选择框取其长度。

达到你想要你可以写以下的东西。

你的jQuery：

jQuery(document).ready(function(){ 

    jQuery('.products select option').each(function(){ 

    var maxLength = jQuery(this).val().length; 
    if(length > maxLength){ 
     $('.products select,.products').css("width","250"); 
    } 

    }); 

    // if max length is greater than 50 then increase the width of the div 250px 


});

你的HTML标记是： -

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    .products{ 
    background:red; 
    width:100px; 
    height:30px; 

    } 
</style> 
</head> 
<body> 
    <p id="hello">Hello World</p> 

    <div class="products"> 
    <select> 
    <option>Test 1</option> 
    <option>Test 2</option> 
    <option>Test 3</option> 
    <option>Test Test Test T Test Test T Test Test T </option> 
    </select> 
    </div> 

</body> 
</html>

来源

2012-02-28 07:23:39 Soarabh

你的意思是：

 

jQuery(document).ready(function(){ 
    var maxLength = 0; 
    jQuery('.products select option').each(function(){ 

    var length = jQuery(this).val().length; 
    if(length > maxLength) { 
     maxLength = length; 
    } 

    }); 
    if(maxLength > 100) { 
    $(".products").css("width", "240px"); 
    $(".products select").css("width", "250px"); 
    } 
});

来源

2012-02-28 07:12:32

添加以下代码到每个环：

if (maxLength > 100) { 
    $('.products,.products select').width(240); 
}

而且看你的updated exmaple。

来源

2012-02-28 07:12:41 scessor

简单的方法是有父DIV一类规则，然后选择因此，所有你需要做的是一类添加到父DIV

jQuery('.products select option').each(function(){ 

    if(maxlength > 50){ 
     $(this).closest('.products').addClass('wide_240'); 

      return false; // break each loop 

    } 


})

不知道你想要的值....一个地方说50 max和240像素，其他地方说，最大100和250像素

来源

2012-02-28 07:13:47 charlietfl

试试这个：

http://jsbin.com/urejey/10/edit

或

HTML代码将是：

<!DOCTYPE html> 
    <html> 
    <head> 
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 

$("select").change(function() { 

     var str = ""; 

     var maxlen = $(this).val().length; 

     $(".products select option:selected").each(function() { 

      str += $(this).text() + " "; 

      }); 

    $("#hello").text("Selected : " + str + " - Length : " + maxlen); 

    if(maxlen > 15){ 

     $("#Chocolates").width(250); 

    } 

    })  

    .change(); 
}); 

</script> 
<style> 

#Chocolates { width:50px; } 

</style> 

</head> 

<body> 

<p id="hello">Hello World</p> 

<div class="products"> 

<select id="Chocolates"> 

    <option>Five Star</option> 

    <option selected="selected">Dairy Milk</option> 

    <option>Safari</option> 

    <option>Kit kat</option> 

    <option>Munch</option> 

    <option>Perk</option> 

    <option>Test Test Test Test Test </option> 

    <option>Test Test Test Test</option> 

    <option>Test Test Test</option> 

</select> 

</div>

来源

2012-02-28 07:41:45

选择风格按在选择下拉标签

回答

相关问题