我是jquery的新手。有没有办法让我按下“输入”旁边的箭头。框(请参阅下面的我的代码段)'选择'下拉列表填入“'输入”下面。领域。在按下箭头的时候,我想拨打电话,以获得“选择”选项。我已经弄清楚了下拉菜单的价值,但我不知道如何将它们作为下拉菜单添加到“输入”中。领域。在从下拉列表中选择值时,它必须填入输入框中。
我不能只使用'选择'因为我想允许用户输入值,这些值可能不是下拉列表中的值。下拉只是为了给出可能的值。
我已经尝试了数据主义者'这在我的案例中非常容易实现,并且完全符合用例,但在任何地方都不受支持,我不得不放弃该解决方案。
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

<input type="text" name="inputVal">
<i class="down"></i>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
&#13;
答案 0 :(得分:1)
点击箭头后,您可以使用length
option
打开下拉列表,更改dropdown
选项更改为选择输入值。
var myDropDown = $('select[name="cars"]');
var length = $('select[name="cars"] > option').length;
$(".down").one("click", function() {
myDropDown.attr('size', length);
});
$('select[name="cars"]').change(function() {
$('input[name="input"]').val($(this).val());
});
&#13;
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input">
<i class="down"></i>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
&#13;
答案 1 :(得分:0)
根据您的要求,最好使用<ul>
代替select
$(".down").on("click", function() {
$("ul").slideDown("fast");
})
$("ul li").on("click", function() {
$("input").val($(this).text())
$("ul").slideUp("fast");
})
.wrapper {
font: 13px Verdana;
width: 150px;
position: relative;
}
.input {
position: relative;
}
.input input {
font: 13px Verdana;
padding: 5px;
width: 100%;
box-sizing: border-box;
}
.input i {
position: absolute;
right: 5px;
top: 10px;
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;
}
ul {
position: absolute;
left: 0;
right: 0;
width: 100%;
z-index: -1;
top: 100%;
margin: 0;
padding: 0;
border: 1px solid #ccc;
box-sizing: border-box;
display: none;
}
ul li {
padding: 5px;
cursor: pointer;
}
ul li:hover {
background: black;
color: #fff;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="wrapper">
<div class="input">
<input type="text" name="inputVal">
<i class="down"></i>
</div>
<ul name="cars">
<li>Volvo</li>
<li>Saab</li>
<li>Fiat</li>
<li>Audi</li>
</ul>
</div>