選擇風格按在選擇下拉標籤

代碼中的文本大小如下。根據文本大小，我想要更改寬度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

選擇風格按在選擇下拉標籤

回答

相關問題