个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个包含 4 个选项的选择列表，并且必须在选择选项中同时显示文本和输入框。例如，单击选择比输入文本框将显示为选择框的选项。
我尝试了一些代码，但没有用。我想这样展示。
<select name="shp" style=" width:170px; font-family:Verdana, Arial, Helvetica, sans-serif; font size:9px; color:#666666; z-index:50" >
<option>Select Shipping</option>
<option value="hc=11.00 s1=5.50 s2=5.50">UK and European Union: Delivery with Tracking and Insurance - 2/3 days - EUR <input type="text" /> - (then 5.50 for each additional object in the parcel)</option>
<option value="hc=13.00 s1=6.50 s2=6.50">United States and Canada: Delivery with Tracking and Insurance - 3/4 days - EUR <!--AMT--> - (then 6.50 for each additional object in the parcel)</option>
<option value="hc=18.00 s1=7.50 s2=7.50">Rest of the World: Delivery with Tracking and Insurance - 4/10 days - EUR <!--AMT--> - (then 7.50 for each additional object in the parcel)</option>
<option value="s1=0.00 s2=0.00">Free Delivery (Priority Mail without Tracking, without Insurance and without guaranteed shipping times) EUR 0.00</option>
</select>最佳答案
您不能将输入字段放在选择框中。但这是您尝试做的尝试，我制作了一个插件(以某种方式)；
我利用数据属性，将它们放在 div 中，这样每当我单击该选项(或 div)时，我都会将该数据属性分配给隐藏的输入字段。
$(document).ready(function() {
// show options
$(".select-field").click(function() {
$(".select-options").show();
});
// handle option click
$(".select-option").click(function() {
$(this).addClass("clicked");
$("#shp").val($(this).data("value"));
$(".select-field").html($(this).data("area"));
$(".select-option").not(this).each(function() {
$(this).removeClass("clicked");
});
});
// get shp value
$(".getSelectValue").click(function() {
alert($("#shp").val());
});
// hide options
$(window).click(function(e) {
if ($(e.target).hasClass("select-option") || $(e.target).hasClass("select-input")) {
} else {
if (!$(e.target).hasClass("select-field")) {
$(".select-options").css("display", "none");
}
}
});
});.select-container {}
.select-container .select-field {
display: inline-block;
padding: 3px 20px;
border-radius: 3px;
border: 1px solid rgb(180, 180, 180);
transition: 0.2s;
cursor: pointer;
}
.select-container .select-field:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.select-container .select-options {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: white;
display: none;
border-radius: 3px;
border: 1px solid rgb(180, 180, 180);
transition: 0.1s;
width: 60%;
cursor: pointer;
}
.select-container .select-options div {
padding: 4px 6px;
border-bottom: 1px solid rgb(180, 180, 180);
transition: 0.2s;
}
.select-container .select-options div:hover {
background-color: rgba(0, 0, 0, 0.1);
}
.select-container .select-options div:last-of-type {
border-bottom: none !important;
}
.select-container .select-options .clicked {
background-color: rgba(60, 150, 210) !important;
color: white;
}<html>
<body>
<div class="select-container">
<div class="select-field">
Choose
</div>
<div class="select-options">
<input id="shp" name="shp" hidden/>
<div class="select-option" data-area="UK and European Union" data-value="hc=11.00 s1=5.50 s2=5.50">UK and European Union: Delivery with Tracking and Insurance - 2/3 days - EUR <input class="select-input" type="text" /> - (then 5.50 for each additional object in the parcel)</div>
<div class="select-option" data-value="hc=13.00 s1=6.50 s2=6.50" data-area="United States and Canada">United States and Canada: Delivery with Tracking and Insurance - 3/4 days - EUR
<!--AMT-->- (then 6.50 for each additional object in the parcel)</div>
<div class="select-option" data-value="hc=18.00 s1=7.50 s2=7.50" data-area="Rest of the World">Rest of the World: Delivery with Tracking and Insurance - 4/10 days - EUR
<!--AMT-->- (then 7.50 for each additional object in the parcel)</div>
<div class="select-option" data-value="s1=0.00 s2=0.00" data-area="Free Delivery">Free Delivery (Priority Mail without Tracking, without Insurance and without guaranteed shipping times) EUR 0.00</div>
</div>
</div>
<br>
<button class="getSelectValue">Get Select Value</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>关于javascript - 有没有办法在选择选项中显示输入框，以便我可以在选项中添加一个值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57319845/
25
4
0
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
在现代 IDE 中，有一个键盘快捷键可以通过键入文件名称来打开文件，而无需将手放在鼠标上。例如: Eclipse:Cmd|Ctrl + Shift + R -> 打开资源 IntelliJ:Cmd|C
有什么东西会等待事件发生(我正在等待的是 WebBrowser.DocumentCompleted)，然后执行代码吗？像这样: If (WebBrowser.DocumentCompleted) 不会
我使用 PHP Minify，它很棒。但我的问题是，是否有任何 PHP 插件或其他东西可以自动检测 javascript/css 代码并自动缩小它？谢谢。 最佳答案 Javascript 压缩器？ 看
有没有一种语言，类似什么CoffeeScript是JavaScript，编译成windows batch|cmd|command line的语言？ 我指的cmd版本是基于NT的，尤其是XP sp3及以
我知道我可以 ，但是，我真的宁愿有一个任务，我可以从任何可以使用所有(或至少大部分)属性的操作系统调用 copy ，但这并没有消除 unix 上的权限。 我想知道是否已经有解决方案，或者我必须自己编
我正在使用 Vuejs(不使用 jQuery)开发一个项目，该项目需要像 jvectormap 这样的 map 但正如我所说，我没有使用 jQuery，那么是否有任何其他库可以在不使用 jQuery
想要进行一个简单的民意调查，甚至不需要基于 cookie，我不在乎投了多少票。有没有类似的插件或者简单的东西？ 最佳答案 这是一个有用的教程 - 让我知道它是否适合您 using jQuery to
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
var FileBuff: TBytes; Pattern: TBytes; begin FileBuff := filetobytes(filename); Result := Co
我想要一个 vqmod xml 文件来添加一次上传多个图像的功能。身边有这样的事吗？ 编辑:Opencart版本:2.1.0.1 最佳答案 最后我写了一个xml来添加到opencart 2.1.0.1
所以考虑这样的函数: public void setTemperature(double newTemperatureValue, TemperatureUnit unit) 其中Temperatur
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
我是 ggplot2 的新手，一直在尝试找到一个全面的美学列表。我想我理解它们的目的，但很难知道哪些可以在各种情况下使用(主要是几何图形？)。 Hadley 的网站偶尔会在各个几何图形的页面上列出可用
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
是否有任何 PHP 函数可以将整数转换为十万和千万？ 900800 -> 9,00,800 500800 -> 5,00,800 最佳答案 由于您已在问题标签中添加了 Yii，因此您可以按照 Yii
使用 Clojure 一段时间后，我积累了一些关于它的惰性的知识。我知道诸如map之类的常用API是否是惰性的。然而，当我开始使用一个不熟悉的API(例如with-open)时，我仍然感到怀疑。 是否
我的项目需要一个像 AvalonDock 这样的对接系统，但它的最后一次更新似乎是在 2013 年 6 月。是否有更多...积极开发的东西可以代替它？ 最佳答案 AvalonDock 实际上相当成熟并
我正在寻找一个可以逆转 clojure 打嗝的函数 所以 turns into [:html] 等等 根据@kotarak的回答，这现在对我有用: (use 'net.cgrand.enliv
我是一名优秀的程序员,十分优秀！