Question

代码如下。根据文字大小，我想更改DIV的宽度。就像select选项的最大文本长度大于100一样，然后将父div的宽度更改为240px，并更改select标签的宽度。

<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

Answer 1

你的意思是：


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

Answer 2

将以下代码添加到每个循环中：

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

另见updated exmaple。

Answer 3

最简单的方法是为父div设置一个类规则并选择所以你需要做的就是在父div中添加一个类

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

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

          return false;  // break each loop

     }


})

不确定您想要哪个值....一个地方说50最大和240px，其他地方说100最大和250px

Answer 4

选择框的渲染机制是，默认采用最大长度。假设在您的示例中，当选择框找到“测试测试测试测试”时，选择框将占用其长度。

要达到你想要的效果，你可以写下以下内容。

你的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>

Answer 5

试试这个：

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>

根据选择下拉标记中的文本大小更改样式

5 个答案: