gpt4 book ai didi

javascript - 如何将下拉列表更改为 jQuery 中选择的文本框?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:51:43 24 4
gpt4 key购买 nike

我有一个下拉列表,当我选择 Other 选项时,我希望它变成一个空文本框。

Enter image description here

HTML代码:

<select id='visit'>
<option value='1' class='volunteer'>Romania</option>
<option value='2' class='volunteer1'>Slovakia</option>
<option value='3' class='volunteer2'>Belgium</option>
<option value='4' class='volunteer3'>Other</option>
</select>

这是开始的最小 JavaScript 代码:

$('#visit').live('change', function () {
if ((this.value) == 4) {
alert("Other selected")
//Code to change select list into textbox here
}
});

JSFiddle where it can be tried is here .

我如何使用 jQuery 做到这一点?

最佳答案

尝试使用.replaceWith()在这种情况下,

$(this).replaceWith('<input/>');

DEMO

完整代码是,

$('#visit').live('change', function () {
if ((this.value) == 4) {
$(this).replaceWith($('<input/>',{'type':'text','value':'other'}));
}
});

DEMO


正如大家所说,替换 select 元素似乎是个坏主意,因此,请尝试根据用户的选择显示/隐藏输入元素。

尝试,

$("input[type=text]").hide();
$('#visit').live('change', function () {
$(this).next('input[type=text]').toggle((this.value) == 4)
});

DEMO

关于javascript - 如何将下拉列表更改为 jQuery 中选择的文本框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24134942/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com