整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          html select 元素下拉點(diǎn)擊事件

          天在寫一個(gè)關(guān)于 html 中 select 下拉元素選擇的動(dòng)態(tài)事件時(shí),發(fā)現(xiàn)如果使用 javascript 中的 click 事件的話,會(huì)被執(zhí)行兩次。網(wǎng)上查了一下資料,發(fā)現(xiàn) select 元素下拉選中事件并不適合使用 click 來(lái)觸發(fā),而要使用 change 事件。

          select元素下拉的click事件

          html代碼

          <select name="mochu" id="mochu">
           <option value="1">下拉1</option>
           <option value="2">下拉2</option>
           <option value="3">下拉3</option>
           <option value="4">下拉4</option>
          </select>
          <script>
           $('#mochu').click(function(){
           console.log($(this).val());
           });
          </script>
          

          點(diǎn)擊下拉后,輸出信息如下:

          通過上圖可以發(fā)現(xiàn),如果 select 元素的下拉菜單使用 click 事件的話,會(huì)輸出兩次結(jié)果,也就說(shuō)在展開下拉菜單之前與選擇下拉菜單之后分別觸發(fā)了 click 事件,所以 select 下拉選項(xiàng)的觸發(fā)事件,不能使用 click,而使用 change 事件。

          javascript select 元素的觸發(fā)事件

          示例代碼

          <select name="mochu" onchange="GetVal(this)">
           <option value="下拉1">選項(xiàng)1</option>
           <option value="下拉2">選項(xiàng)2</option>
           <option value="下拉3">選項(xiàng)3</option>
           <option value="下拉4">選項(xiàng)4</option>
          </select>
          <script>
           function GetVal(obj){
           //代表的是選中項(xiàng)的index索引
           var index = obj.selectedIndex;
           //代表的是選中項(xiàng)的的值
           var val = obj.options[index].value;
           //代表的是選中項(xiàng)的text
           var txt = obj.options[index].text;
           console.log(index);
           console.log(val);
           console.log(txt);
           }
          </script>
          

          輸出結(jié)果:

          .NET的SelectPdf Html到Pdf轉(zhuǎn)換器-社區(qū)版是.NET的SelectPdf庫(kù)中提供的功能強(qiáng)大的html到pdf轉(zhuǎn)換器的免費(fèi)版本。
          轉(zhuǎn)換器提供了許多強(qiáng)大的選項(xiàng)(將任何網(wǎng)頁(yè)轉(zhuǎn)換為pdf,將任何html字符串轉(zhuǎn)換為pdf,html5 / css3 / javascript支持,頁(yè)眉和頁(yè)腳支持等),唯一的限制是它最多可以生成pdf文檔。5頁(yè)長(zhǎng)。
          .NET的免費(fèi)HTML至Pdf轉(zhuǎn)換器–社區(qū)版功能:最多生成5頁(yè)pdf文檔,將任何網(wǎng)頁(yè)轉(zhuǎn)換為pdf,將任何原始html字符串轉(zhuǎn)換為pdf,設(shè)置pdf頁(yè)面設(shè)置(頁(yè)面大小,頁(yè)面方向,頁(yè)面邊距) ,在轉(zhuǎn)換過程中調(diào)整內(nèi)容大小以適合pdf頁(yè)面,設(shè)置pdf文檔屬性,設(shè)置pdf查看器首選項(xiàng),設(shè)置pdf安全性(密碼,權(quán)限),設(shè)置轉(zhuǎn)換延遲和網(wǎng)頁(yè)導(dǎo)航超時(shí),自定義頁(yè)眉和頁(yè)腳,在頁(yè)眉中支持html和頁(yè)腳,自動(dòng)和手動(dòng)分頁(yè)符,在每個(gè)頁(yè)面上重復(fù)html表頭,支持@media類型屏幕和打印,支持內(nèi)部和外部鏈接,基于html元素自動(dòng)生成書簽,支持HTTP標(biāo)頭,支持HTTP cookie,支持需要身份驗(yàn)證的網(wǎng)頁(yè),支持代理服務(wù)器,啟用/禁用javascript,修改顏色空間,多線程支持,HTML5 / CSS3支持,Web字體支持等等。


          代碼實(shí)現(xiàn)

          1、nuget 引用

          Install-Package Select.HtmlToPdf

          2、方法

          • using SelectPdf;using System.Collections.Specialized;using System.IO;using System.Web;
            namespace BQoolCommon.Helpers.File{ public class WebToPdf { public WebToPdf() { //SelectPdf.GlobalProperties.LicenseKey = "your-license-key"; }
            /// <summary> /// 將 Html 轉(zhuǎn)成 PDF,並儲(chǔ)存成檔案 /// </summary> /// <param name="html">html</param> /// <param name="fileName">絕對(duì)路徑</param> public void SaveToFileByHtml(string html, string fileName) { var doc = SetPdfDocument(html); doc.Save(fileName); }
            /// <summary> /// 傳入 Url 轉(zhuǎn)成 PDF,並儲(chǔ)存成檔案 /// </summary> /// <param name="url">url</param> /// <param name="fileName">絕對(duì)路徑</param> /// <param name="httpCookies">Cookies</param> public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies) { var doc = SetPdfDocument(url, httpCookies); doc.Save(fileName); }
            /// <summary> /// 將 Html 轉(zhuǎn)成 PDF,並輸出成 byte[] 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public byte[] GetFileByteByHtml(string html) { var doc = SetPdfDocument(html); return doc.Save(); }
            /// <summary> /// 傳入 Url 轉(zhuǎn)成 PDF,並輸出成 byte[] 格式 /// </summary> /// <param name="url">url</param> /// <param name="httpCookies">Cookies</param> /// <returns></returns> public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies) { var doc = SetPdfDocument(url, httpCookies); return doc.Save(); }
            /// <summary> /// 將 Html 轉(zhuǎn)成 PDF,並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByHtml(string html) { var doc = SetPdfDocument(html); var pdfStream = new MemoryStream();
            doc.Save(pdfStream); pdfStream.Position = 0;
            return pdfStream; }
            /// <summary> /// 傳入 Url 轉(zhuǎn)成 PDF,並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies) { var doc = SetPdfDocument(url, httpCookies); var pdfStream = new MemoryStream();
            doc.Save(pdfStream); pdfStream.Position = 0;
            return pdfStream; }
            private PdfDocument SetPdfDocument(string html) { var converter = new HtmlToPdf();
            converter.Options.WebPageWidth = 1200; html = HttpUtility.HtmlDecode(html);
            return converter.ConvertHtmlString(html); }
            private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies) { var converter = new HtmlToPdf(); converter.Options.WebPageWidth = 1200;
            if (httpCookies != && httpCookies.Count != 0) { converter.Options.HttpCookies.Add(httpCookies); }
            return converter.ConvertUrl(url); }
            }}

            3、調(diào)用

            • /// <summary> /// 下載pdf /// </summary> public void Downpdf(string data) { var stream = new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data)); Response.Clear(); //二進(jìn)制流數(shù)據(jù)(如常見的文件下載) Response.ContentType = "application/octet-stream"; //通知瀏覽器下載文件而不是打開 Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode("Profit and Loss Statement.pdf", System.Text.Encoding.UTF8)); var bytes = StreamToBytes(stream); Response.BinaryWrite(bytes); Response.Flush(); stream.Close(); stream.Dispose();
              Response.End(); }

              那么如何獲取指定頁(yè)面的html 呢 傳入對(duì)應(yīng)的model 獲得指定動(dòng)態(tài)的html

              • private string Gethtml(string data) { string str = "";
                str = this.ControllerContext.RenderViewToString("ProfitDetails", data);
                return str; }
                • using BQoolCommon.Helpers.Format;using Newtonsoft.Json;using OrdersManager.Models.ViewModel.Report;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;
                  namespace OrdersManager.Web.Infrastructure{ public static class HelperExtensions { public static string RenderViewToString(this ControllerContext context, string viewName, string data) { if (string.IsOrEmpty(viewName)) viewName = context.RouteData.GetRequiredString("action");
                  context.Controller.ViewData.Model = JsonConvert.DeserializeObject<ProfitDetailsmodel>(StringTools.Base64Decode(StringTools.Base64Decode(data)));
                  using (var sw = new StringWriter()) { ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(context, viewName); var viewContext = new ViewContext(context, viewResult.View, context.Controller.ViewData, context.Controller.TempData, sw); try { viewResult.View.Render(viewContext, sw); } catch (Exception ex) { throw; }
                  return sw.GetStringBuilder().ToString(); } } }}

                  參考文檔

                  https://www.nuget.org/packages/Select.HtmlToPdf/

          TML 的 select 標(biāo)簽是網(wǎng)頁(yè)開發(fā)人員構(gòu)建交互式下拉列表的強(qiáng)大工具。它允許用戶從預(yù)定義的選項(xiàng)列表中進(jìn)行選擇,使表單輸入更加高效且用戶友好。在本文中,我們將全面探索 select 標(biāo)簽的各種可能性,揭秘一些提高表單功能和用戶體驗(yàn)的技巧。

          select 標(biāo)簽的基本語(yǔ)法

          select 標(biāo)簽的基本語(yǔ)法如下:

          <select>
            <option value="value1">選項(xiàng) 1</option>
            <option value="value2">選項(xiàng) 2</option>
            <option value="value3">選項(xiàng) 3</option>
          </select>
          

          在這個(gè)例子中,select 標(biāo)簽定義了下拉列表,而 option 標(biāo)簽定義了列表中的選項(xiàng)。每個(gè) option 標(biāo)簽都有一個(gè) value 屬性,表示選項(xiàng)的值,以及顯示給用戶的文本。

          自定義選項(xiàng)

          select 標(biāo)簽提供了多種屬性來(lái)自定義選項(xiàng):

          • selected 屬性可以將特定選項(xiàng)設(shè)置為默認(rèn)選中。
          • disabled 屬性禁用某個(gè)選項(xiàng),使其無(wú)法被選擇。
          • optgroup 標(biāo)簽允許你將選項(xiàng)分組,并為其添加標(biāo)簽。

          來(lái)看一個(gè)帶有默認(rèn)選中和禁用選項(xiàng)的例子:

          <select>
            <option value="apple">蘋果</option>
            <option value="banana" selected>香蕉</option>
            <option value="orange" disabled>橙子</option>
          </select>
          

          在這個(gè)例子中,"香蕉" 選項(xiàng)將被默認(rèn)選中,而 "橙子" 選項(xiàng)將被禁用。

          增強(qiáng) select 標(biāo)簽

          select 標(biāo)簽可以通過多種方式進(jìn)行增強(qiáng),以提高用戶體驗(yàn):

          • size 屬性允許你指定下拉列表中可見的選項(xiàng)數(shù)量。
          • multiple 屬性允許用戶選擇多個(gè)選項(xiàng)。
          • autocomplete 屬性啟用瀏覽器自動(dòng)完成功能,基于以前的輸入提供選項(xiàng)建議。

          來(lái)看一個(gè)帶有多個(gè)選中的例子:

          <select multiple>
            <option value="apple">蘋果</option>
            <option value="banana">香蕉</option>
            <option value="orange">橙子</option>
          </select>
          

          在這個(gè)例子中,用戶可以選擇多個(gè)水果選項(xiàng)。

          樣式化 select 標(biāo)簽

          雖然 select 標(biāo)簽的樣式化受到瀏覽器限制,但你仍然可以使用 CSS 來(lái)一定程度地美化它:

          • 你可以添加背景顏色、邊框和圓角來(lái)美化 select 標(biāo)簽的外觀。
          • 使用偽類和屬性選擇器來(lái)改變箭頭圖標(biāo)、選項(xiàng)的背景顏色和文本顏色。

          來(lái)看一個(gè)添加自定義樣式的例子:

          <style>
            select {
              padding: 10px;
              border: 1px solid #ccc;
              border-radius: 5px;
            }
            
            select:hover {
              border-color: #007bff;
            }
          </style>
          
          <select>
            <option value="option1">選項(xiàng) 1</option>
            <option value="option2">選項(xiàng) 2</option>
          </select>
          

          在這個(gè)例子中,我們使用 CSS 為 select 標(biāo)簽添加了內(nèi)邊距、邊框和圓角,并在懸停時(shí)改變邊框顏色。

          結(jié)論:打造動(dòng)態(tài)選擇體驗(yàn)

          HTML select 標(biāo)簽為網(wǎng)頁(yè)開發(fā)人員提供了創(chuàng)建動(dòng)態(tài)選擇體驗(yàn)的強(qiáng)大工具。通過結(jié)合選項(xiàng)自定義、增強(qiáng)功能和樣式化技術(shù),你可以創(chuàng)建出高效、直觀且視覺吸引人的下拉列表。不斷探索 select 標(biāo)簽的無(wú)限可能,讓你的網(wǎng)頁(yè)表單更加充滿活力和互動(dòng)性!釋放你的創(chuàng)造力,打造令人難忘的用戶選擇體驗(yàn)!


          主站蜘蛛池模板: 无码国产精品一区二区免费模式 | av一区二区三区人妻少妇| 中文字幕在线一区二区在线| 极品尤物一区二区三区| 国产成人无码一区二区在线观看 | 国精品无码一区二区三区在线| 精品无人区一区二区三区在线 | 国产一区二区在线|播放| 无码国产精品一区二区免费式影视 | 伊人久久精品一区二区三区 | 亚洲乱码国产一区网址| 成人精品视频一区二区三区尤物| 无码av免费一区二区三区| 亚洲综合色自拍一区| 亚洲综合无码精品一区二区三区| 一区二区在线视频免费观看| 国产在线一区二区三区av| 婷婷亚洲综合一区二区| 日韩视频一区二区| 免费看AV毛片一区二区三区| 中文精品一区二区三区四区| 中文字幕在线不卡一区二区| 亚洲区精品久久一区二区三区 | 视频一区精品自拍| 夜夜添无码试看一区二区三区| 激情综合一区二区三区| 久久久一区二区三区| 3d动漫精品啪啪一区二区中文| 国产精品自拍一区| 亚洲一区二区三区在线观看网站 | 国产熟女一区二区三区五月婷| 日韩精品久久一区二区三区| 国产SUV精品一区二区四| 日本精品一区二区三区在线视频| 波多野结衣精品一区二区三区| 国产精品女同一区二区久久| 自慰无码一区二区三区| 无码人妻精品一区二区在线视频| 亚洲一区二区三区国产精品| 99精品国产一区二区三区| 在线精品亚洲一区二区三区|