Question

option

我担心的是，如果选项中的文本长度大于其容器的长度（SELECT client_tt.id_client_tt as id, client_tt.tt_name as caption, SUM(delivery_data.money) AS value, client_tt.latitude as lat, client_tt.longitude as lon FROM delivery_data JOIN client_tt on (client_tt.id_client_tt = delivery_data.id_client_tt) WHERE (delivery_date BETWEEN '2017-01-01' AND '2017-03-31') AND client_tt.latitude != 0 AND client_tt.longitude != 0 AND delivery_data.delivery_group_id IN (58) AND delivery_data.id_product = ANY ( VALUES(7153), (9812), (5411), (9801), (5039), (7010), (4632), (5316), (1727), (9785), (5622), (8533), (5031), (756), (2769), (3239), (8680), (9775), (7958), (8630), (4059), (7185), (8261), (3652), (6950), (2148), (7828), (8695), (6228), (9803), (8112), (9536), (6466), (4447), (359), (3310), (7332), (4512), (5700), (7981), (4650), (9223), (8519), (4519), (9784), (8689), (8545), (541), (5134), (4081), (774), (6068), (7038), (6346), (7956), (10005), (9090), (537), (2300), (526), (4485), (8106), (3445), (559), (8256), (8825), (10085), (8874), (6680), (357), (6198), (2556), (5058), (7938), (5352), (8940), (2741), (4667), (6560), (4137), (5733), (763), (7088), (2486), (6512), (6642), (6674), (752), (4105), (2554), (6349), (7333), (6922), (3882), (2768), (3700), (9799), (9866), (9770), (533), (7384), (8468), (9320), (343), (5506), (4212), (8922), (10021), (6696), (9144), (3242), (5504), (6210), (5968), (5721), (2886), (8678), (7928), (7131), (4020), (9776), (6021), (6136), (6303), (9686), (7030), (8855), (6686), (9556), (10009), (1903), (8876), (6503), (2497), (8697), (10198), (2155), (5497), (5865), (8282), (4449), (7774), (6700), (7934), (8522), (9289), (10003), (8081), (5429), (547), (8320), (6305), (556), (2605), (8433), (9441), (5035), (9507), (6980), (2992), (5019), (7613), (9991), (2323), (4513), (3594), (8014), (737), (6298), (8449), (6285), (5790), (8266), (5041), (748), (7366), (9574), (5062), (5346), (2349), (5259), (8527), (5414), (5698), (6058), (7327), (4647), (8567), (4242), (8474), (3669), (3161), (7848), (6643), (8321), (8410), (530), (5415), (9097), (6031), (7219), (9768), (6793), (7646), (7049), (10079), (4761), (7324), (8679), (5032), (5141), (6556), (546), (7297), (358), (736), (6678), (8593), (5034), (8161), (9779), (4518), (5558), (758), (739), (4525), (9663), (8515), (8621), (3673), (535), (10094), (3443), (6933), (7717), (4248), (5139), (8123), (9920), (2355), (9936), (8307), (10228), (3619), (7273), (9162), (7279), (10011), (7921), (9462), (542), (9692), (5043), (5376), (8096), (8436), (5418), (10098), (2990), (5193), (6651), (1860), (6135), (8889), (4241), (3596), (6542), (2354), (762), (7360), (8326), (531), (5701), (5132), (4643), (6280), (9323), (4523), (6291), (8836), (3292), (5038), (4668), (3276), (560), (7852), (2299), (7120), (5633), (545), (9788), (4795), (2793), (9727), (6641), (7631), (553), (6670), (3004), (2984), (3293), (2865), (5094), (7867), (9322), (4249), (4672), (5263), (6197), (6689), (3456), (6137), (7599), (3576), (3577), (10096), (9763), (2867), (6276), (6316), (5404), (2303), (8710), (351), (5135), (5547), (2374), (8310), (8699), (10082), (2559), (7203), (7016), (5325), (3888), (742), (9398), (5322), (6134), (10004), (764), (9790), (5196), (7152), (9669), (7596), (8709), (9580), (7962), (1905), (2548), (4080), (5198), (9302), (9434), (5136), (552), (3767), (4243), (5242), (4654), (6645), (4670), (2898), (7975), (3175), (6608), (2490), (3210), (8183), (7608), (9496), (9564), (4777), (7605), (4804), (7601), (3211), (9164), (9913), (2888), (9767), (9167), (3291), (10076), (8272), (2369), (7597), (3138), (8529), (769), (9460), (9537), (3296), (9687), (8548), (766), (7312), (5018), (9563), (4540), (5421), (8973), (8636), (10099), (5373), (9824), (5095), (7017), (9540), (3621), (2985), (8440), (3889), (5374), (6690), (8514), (8405), (9233), (6761), (4373), (6661), (7253), (9458), (528), (4448), (3711), (8431), (9490), (544), (5929), (4077), (9725), (4508), (8811), (3298), (8863), (9108), (6788), (6362), (2697), (6610), (360), (6133), (8383), (780), (8406), (5082), (10084), (4078), (10018), (5138), (8108), (9766), (6652), (2547), (9491), (9409), (5045), (3651), (561), (8425), (8442), (9130), (9109), (3442), (4101), (6662), (8364), (2269), (4240), (4645), (2892), (4717), (5410), (5987), (8075), (8703), (3772), (746), (7598), (9780), (7606), (5417), (5509), (3898), (344), (2820), (3748), (6665), (7110), (776), (5507), (5706), (7158), (3765), (6943), (5324), (5513), (7097), (7923), (7924), (5750), (6340), (4486), (5286), (6703), (6640), (6694), (9566), (9912), (6616), (6656), (8671), (9791), (4522), (6912), (3090), (8661), (757), (3954), (527), (773), (2494), (345), (4168), (6151), (3595), (9764), (5726), (10016), (1939), (7966), (6288), (8711), (1900), (7894), (749), (3099), (6403), (8990), (772), (2558), (6281), (548), (9786), (8089), (8693), (9277), (10012), (9116), (7034), (740), (4247), (8706), (10233), (8090), (8682), (7615), (7667), (9291), (6352), (8829), (8698), (550), (6660), (9661), (5377), (5912), (10100), (9499), (10196), (549), (8427), (3771), (5372), (4743), (1519), (2324), (8117), (7963), (9032), (2301), (8141), (9140), (745), (4757), (7220), (6679), (2147), (5293), (5336), (9425), (8807), (4079), (3622), (6311), (8806), (9498), (2899), (4445), (7890), (5515), (8853), (765), (2557), (6047), (10002), (5514), (4100), (2890), (733), (4139), (1898), (555), (6059), (554), (5966), (6505), (3883), (6513), (8315), (7172), (5428), (9102), (2555), (8838), (2302), (4790), (8049), (8323), (6867), (2866), (10104), (6209), (9082), (9110), (6402), (9864), (7211), (8064), (3899), (6006), (7127), (779), (5013), (1997), (738), (7675), (4141), (7164), (7371), (5725), (8700), (4669), (6376), (9085), (3241), (8103), (6511), (2296), (5137), (5919), (7929), (2891), (3446), (10103)) GROUP BY client_tt.id_client_tt;），那么它应该自动转换（适合）为多行以适合容器＆＃39 ;宽度。

Answer 1

这可能不是你想要的，但你可以通过使用＆＃34; optgroup＆＃34;每个选项获得两行。标签

＆＃13;

<select>
  <optgroup label="Option 1">
    <option value="yes">Option 1 new Line</option>
  </optgroup>
  <optgroup label="Option 2">
    <option value="no">Option 2 new line</option>
  </optgroup>
</select>

＆＃13;

您可以从此链接中找到有关此主题的更多详细信息 enter link description here

Answer 2

您不能破坏选择选项。相反，您可以为选项提供工具提示以显示冗长的选项。

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <style>
        .option100 {
            width: 100px !important;
        }
    </style>
</head>

<body>
    <select id="fieldOfInterestSelect" name="fieldOfInterest" class="form-control option100" required="">
        <option value="-1">SELECT ONE</option>
        <option title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!" value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
        <option  title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"  value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
        <option  title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"  value="4892" class="option100">Daterrrrrrr</option>
        <option  title="This is my lengthy explanation of what this selection really means, so since you only see 1 on the drop down list you really know that you're opting to elect me as King of Willywarts!  Always be sure to read the fine print!"  value="4894" class="option100">Forecast(R)RRRRRR</option>
    </select>

</body>

</html>

＆＃13;

Answer 3

尝试以下代码

HTML

<select id="resizing_select" name="fieldOfInterest" class="form-control" required="">
    <option value="-1">SELECT ONE</option>
    <option value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
    <option value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
    <option value="4892" class="option100">Daterrrrrrr</option>
    <option value="4894" class="option100">Forecast(R)RRRRRR</option>
</select>
<select id="width_tmp_select">
  <option id="width_tmp_option"></option>
</select>

Jquery的

$(document).ready(function() {
 $('#resizing_select').change(function(){
    $("#width_tmp_option").html($('#resizing_select option:selected').text());
    $(this).width($("#width_tmp_select").width()); 
 });
});

CSS

#resizing_select {
 width: 107px;
} 

#width_tmp_select{
 display : none;
}

这是工作的jsfiddle：http://jsfiddle.net/FSsG8/623/

我认为它应该对你有所帮助。

Answer 4

您的回答在这里查看此fiddle，请使用selectBoxIt plugin。

让我知道它会对你有所帮助！

选择选项宽度自动增加

4 个答案: