JavaScript解決select下拉框中的內容太長顯示不全的問題

阿新 • • 發佈：2018-11-17

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

JavaScript解決select下拉框中的內容太長顯示不全的問題

1、說明

有些情況下，select下拉框的內容過長，導致部分看不見；

現在通過滑鼠事件，讓下拉框中的內容顯示完全

2、實現原始碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript解決select下拉框中的內容太長顯示不全的問題</title 
><script type="text/javascript">      /**    * 自動設定select下拉框的寬度    */      function autoWidth()   {    //獲取select中的ID    var selectId = document.getElementById("select_option");    //自動設定下拉框的寬度 
    selectId.style.width = 'auto';   }      /**    * 設定select下拉框的寬度    */   function setWidth()   {    //獲取select中的ID    var selectId = document.getElementById("select_option");    //設定select下拉框的寬度為120    selectId.style.width = "120px";   }</script></head><body>   <div id="select_div">       <select  id="select_option"                onmousedown="autoWidth()"             onblur="setWidth()"                onchange="setWidth()">       <option value="0">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>            <option value="1">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>            <option value="2">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>            <option value="3">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>            <option value="4">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>            <option value="5">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>            <option value="6">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>            <option value="7">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</option>            <option value="8">IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>            <option value="9">JJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ</option>   </select>   </div></body></html>

3、實現結果

（1）初始化時

（2）選中第三項

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

JavaScript解決select下拉框中的內容太長顯示不全的問題

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

JavaScript向select下拉框中添加和刪除元素

ont gravity cli 大神 sso -name doc jsb UNC JavaScript向select下拉框中添加和刪除元素 1、說明 a 利用append()方法向下拉框中添加元素 b 利用remove()方法移除下拉框中最後一個元素 2、

Javascript獲取select下拉框選中的的值,select中指定option選中觸發事件

現在有一id=test的下拉框，怎麼拿到選中的那個值呢？分別使用javascript原生的方法和jquery方法 <select id="test" name="" onchange="gradeChange()"> <option va

Javascript獲取select下拉框選中的的值

title nbsp span htm .text 下拉框 dex alert tle Javascript獲取select下拉框選中的的值現在有一id=test的下拉框，怎麽拿到選中的那個值呢？分別使用javascript原生的方法和jquery方法 <sel

js獲取select下拉框中的值

現在有一id為userType的下拉框，怎麼獲取選中的值： 1 使用者型別: 2 <select name="type" id="userType"> 3 <option value="0">請選擇</option> 4 <option v

關於javaScript實現select下拉框自動展開

我本來的目的：是想實現滑鼠移動到select下拉框上，下拉框自動展開。原先思路：使用onmouseover()滑鼠事件呼叫一個openSelect()函式，函式中呼叫onclick()方法，以為就可以了（程式碼如下），我想得太簡單了。 <head&g

ajax非同步請求的list集合，怎麼迴圈新增到select下拉框中？

在jsp頁面中，通過非同步請求，返回的list集合，需要迴圈新增到select下拉框中，如下：$("#fundCode").change(function(){ var fundCode = $(this).val(); var financeAcc = $("#financ

javascript 之 select下拉框

作者: 羅代均 ldj_work#126.com 轉載請保持完整性 1.動態建立select function createSelect(){ var mySelect = document.createElement("select");

解決select 下拉框設定disabled屬性後 form表單提交到後臺取不到值的情況

1. 鑑於select 下拉框沒有readonly屬性，有以下兩種方式： 1. <select style='width: 235px;color:#aaa' onfocus="this.defaultIndex=this.selectedIndex

4種方法獲取select下拉框標簽中的值

定位 tag name () 節點通過 ext col path 選中下拉框中“上海” 代碼如下：<select id="province" class="select" name="province"> <option value="0">請選擇

select下拉框可以直接取list裏的內容不用非得轉map (不得不承認我是個ZZ，這麽簡單的問題才反應過來，--^--)

basic xor class form for xid xcode ace 隨筆需求描述：select下拉框的填充項，從後臺傳來的list中獲取自黑一下：之前有篇隨筆，寫的是通過map傳到前臺，在前臺的select中的value屬性取值用map的key，而selec

pb編輯視窗控制下拉框中的內容自動篩選並必須選擇正確和欄位型別正確

dw 的 editchanged事件: ib_changed = true cb_update.enabled = true datawindowchild ldwc_dddw datawindowchild ldwc_dddw1 CHOOSE CASE dwo.nam

select下拉框高度解決辦法，設定預設顯示幾個

自己筆記，防止忘記 <select class="form-control" data-edit-select="1" id="add_categoryId" name="categoryId" onmousedown="if(this.options.length&

freemarker ftl 檔案中寫radio單選框select 下拉框並且帶if條件判斷

<#list themes as t> <#switch t.id> <#case "default"> <input name="console-options-theme-menu" ty

jQuery實現當select下拉框內容變化時，input輸入框內容隨之變化

今天實現了一個功能，當select下拉框中的內容發生變化時，input輸入框中的內容隨之發生變化，具體實現方法如下： //繫結change事件，當下拉框內容發生變化時啟動事件 $("#wlms")

關於HTML中select下拉框的取值問題

<div> <select name="select-test" id="select-test"> <option value="1" >yi</option> <option value="2" >e

js：可輸入可選擇的select下拉框,可及時匹配包含輸入的內容（相容ie）

1、原理： 1.1將input輸入框和select框合併在一起，但是顯示出向下點選的按鈕: 這種比較容易做到 1.2出現輸入值能夠自動匹配的功能動態的載入一個臨時的div出現在該input下方，當點選頁面中的空白地方，div隱藏。 1.3程式碼： <!docty

jQuery外掛實現select下拉框左右選擇_交換內容（multiselect2side）的一些網站 (有時間整理)

http://blog.csdn.net/mexican_jacky/article/details/51151495 http://blog.csdn.net/nihaoma71121/article/details/50971672 http://www.t

select下拉框在IOS中背景變黑、出現陰影問題

select下拉框在ios自帶瀏覽器中，會自帶黑色背景及陰影，解決方法：設定其樣式的時候加上-webkit-appearance: none; 但此時select下拉框點開的小箭頭也會消失，所以這種情

解決iview 的select下拉框選項錯位的問題

在使用iview的過程中，遇到這樣一個問題，在Model中使用select下拉框元件。但是當彈出框超過一屏需要滾動時，select的下拉選項會出現錯位（下圖1為正常，圖2為滾動後，下拉選項錯位。）圖1：圖2：在分析元件程式碼後，發現以下一個樣式： .ivu-modal .i

JavaScript解決select下拉框中的內容太長顯示不全的問題

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow

相關推薦