Home/ Questions/Q 7571829
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T15:46:02+00:00

The code is as below. As per the text size I want to change

  • 0

The code is as below. As per the text size I want to change the width of DIV. Like if the max text length of select option is more than 100 then change the width of parent div to 240px and also change the width of select tag.

<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 I tried 

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


});

Example JS Bin

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The rendering mechanism of a select box is, It takes the by default the max Length. Suppose In your example when select box find “Test Test Test Test” select box takes its length.

    To achieve what you want you can write following.

    Your 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


});

    Your Html Markup would be :-

    <!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>
    • 0