html select 元素下拉点击事件

天在写一个关于 html 中 select 下拉元素选择的动态事件时，发现如果使用 javascript 中的 click 事件的话，会被执行两次。网上查了一下资料，发现 select 元素下拉选中事件并不适合使用 click 来触发，而要使用 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>

点击下拉后，输出信息如下：

通过上图可以发现，如果 select 元素的下拉菜单使用 click 事件的话，会输出两次结果，也就说在展开下拉菜单之前与选择下拉菜单之后分别触发了 click 事件，所以 select 下拉选项的触发事件，不能使用 click，而使用 change 事件。

javascript select 元素的触发事件

示例代码

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

输出结果：

述

.NET的SelectPdf Html到Pdf转换器-社区版是.NET的SelectPdf库中提供的功能强大的html到pdf转换器的免费版本。
转换器提供了许多强大的选项（将任何网页转换为pdf，将任何html字符串转换为pdf，html5 / css3 / javascript支持，页眉和页脚支持等），唯一的限制是它最多可以生成pdf文档。5页长。
.NET的免费HTML至Pdf转换器–社区版功能：最多生成5页pdf文档，将任何网页转换为pdf，将任何原始html字符串转换为pdf，设置pdf页面设置（页面大小，页面方向，页面边距），在转换过程中调整内容大小以适合pdf页面，设置pdf文档属性，设置pdf查看器首选项，设置pdf安全性（密码，权限），设置转换延迟和网页导航超时，自定义页眉和页脚，在页眉中支持html和页脚，自动和手动分页符，在每个页面上重复html表头，支持@media类型屏幕和打印，支持内部和外部链接，基于html元素自动生成书签，支持HTTP标头，支持HTTP cookie，支持需要身份验证的网页，支持代理服务器，启用/禁用javascript，修改颜色空间，多线程支持，HTML5 / CSS3支持，Web字体支持等等。

代码实现

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 轉成 PDF，並儲存成檔案 /// </summary> /// <param name="html">html</param> /// <param name="fileName">絕對路徑</param> public void SaveToFileByHtml(string html, string fileName) { var doc = SetPdfDocument(html); doc.Save(fileName); }
 /// <summary> /// 傳入 Url 轉成 PDF，並儲存成檔案 /// </summary> /// <param name="url">url</param> /// <param name="fileName">絕對路徑</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 轉成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public byte[] GetFileByteByHtml(string html) { var doc = SetPdfDocument(html); return doc.Save(); }
 /// <summary> /// 傳入 Url 轉成 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 轉成 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 轉成 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、调用

/// <summary> /// 下载pdf /// </summary> public void Downpdf(string data) { var stream = new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data)); Response.Clear(); //二进制流数据（如常见的文件下载） 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(); }

那么如何获取指定页面的html 呢传入对应的model 获得指定动态的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 标签是网页开发人员构建交互式下拉列表的强大工具。它允许用户从预定义的选项列表中进行选择，使表单输入更加高效且用户友好。在本文中，我们将全面探索 select 标签的各种可能性，揭秘一些提高表单功能和用户体验的技巧。

select 标签的基本语法

select 标签的基本语法如下：

<select>
  <option value="value1">选项 1</option>
  <option value="value2">选项 2</option>
  <option value="value3">选项 3</option>
</select>

在这个例子中，select 标签定义了下拉列表，而 option 标签定义了列表中的选项。每个 option 标签都有一个 value 属性，表示选项的值，以及显示给用户的文本。

自定义选项

select 标签提供了多种属性来自定义选项：

selected 属性可以将特定选项设置为默认选中。
disabled 属性禁用某个选项，使其无法被选择。
optgroup 标签允许你将选项分组，并为其添加标签。

来看一个带有默认选中和禁用选项的例子：

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

在这个例子中，"香蕉" 选项将被默认选中，而 "橙子" 选项将被禁用。

增强 select 标签

select 标签可以通过多种方式进行增强，以提高用户体验：

size 属性允许你指定下拉列表中可见的选项数量。
multiple 属性允许用户选择多个选项。
autocomplete 属性启用浏览器自动完成功能，基于以前的输入提供选项建议。

来看一个带有多个选中的例子：

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

在这个例子中，用户可以选择多个水果选项。

样式化 select 标签

虽然 select 标签的样式化受到浏览器限制，但你仍然可以使用 CSS 来一定程度地美化它：

你可以添加背景颜色、边框和圆角来美化 select 标签的外观。
使用伪类和属性选择器来改变箭头图标、选项的背景颜色和文本颜色。

来看一个添加自定义样式的例子：

<style>
  select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  select:hover {
    border-color: #007bff;
  }
</style>

<select>
  <option value="option1">选项 1</option>
  <option value="option2">选项 2</option>
</select>

在这个例子中，我们使用 CSS 为 select 标签添加了内边距、边框和圆角，并在悬停时改变边框颜色。

结论：打造动态选择体验

HTML select 标签为网页开发人员提供了创建动态选择体验的强大工具。通过结合选项自定义、增强功能和样式化技术，你可以创建出高效、直观且视觉吸引人的下拉列表。不断探索 select 标签的无限可能，让你的网页表单更加充满活力和互动性！释放你的创造力，打造令人难忘的用户选择体验！

在线咨询

上一篇：网页版微软Outlook本月计划引入原生翻译功能
下一篇：H5网页实现微信分享功能「转」

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。