Jquery 关于更改选择框的if-else语句

我试图让它选择变量“choice”来决定在下拉列表中选择哪个元素。问题是，当我单击“标语”然后返回“标题”时，它开始写入两个文本字段

HTML

<select class="choice">
    <option value="h">Header</option>
    <option value="s">Slogan</option>
</select>   
<input class="selecttext" type="text" placeholder="Main Text"></input>

标题
标语

JavaScript

$(".fontsdiv .choice").on("change", function() {
    var choice = $(".choice").val();
    if (choice === "h") {
        $(".selecttext").keyup(function(event) {
            var titlechange = $(".selecttext").val();
            $(".maintitle").html("<h1 class='maintitle'>" + titlechange + "</h1>");
            $(".maintitle").draggable();

        });
    } else if (choice === "s") {
        $(".selecttext").keyup(function(event) {
            var titlechanges = $(".selecttext").val();
            $(".secondtitle").html("<h1 class='secondtitle'>" + titlechanges + "</h1>");
            $(".secondtitle").draggable();

        });
    }
});

$（.fontsdiv.choice”）.on（“更改”，函数（）{
var choice=$（“.choice”）.val（）；
如果（选项==“h”）{
$（“.selecttext”）.keyup（函数（事件）{
var titlechange=$（“.selecttext”）.val（）；
$（“.mainttitle”）.html（“+titlechange+”）；
$（“.maintitle”）.draggable（）；
});
}else if（选项==“s”）{
$（“.selecttext”）.keyup（函数（事件）{
变量titlechanges=$（“.selecttext”）.val（）；
$（“.secondtitle”）.html（“+titlechanges+”）；
$（“.secondtitle”）.draggable（）；
});
}
});

由于您在

更改

事件中绑定事件处理程序，因此每次更改值时，都会将一个新的事件处理程序附加到

输入

元素，简言之，会附加多个事件处理程序

您需要检查

input

元素的

keyup

事件中的值

$（“.selecttext”）.keyup（函数（事件）{
var choice=$（“.choice”）.val（）；
var titlechange=$（“.selecttext”）.val（）；
如果（选项==“h”）{
$（“.mainttitle”）.html（“+titlechange+”）；
//$（“.maintitle”）.draggable（）；
}else if（选项==“s”）{
$（“.secondtitle”）.html（“+titlechanges+”）；
//$（“.secondtitle”）.draggable（）；
}
});
$（“.choice”）。关于（“更改”，函数（）{
//明确价值
$（“.selecttext”）.val（“”）；
});

标题
标语


这是因为您使用的是
onchange
。。这就是更改值时应该执行的操作。。如果
选项！==“h”
？您想做什么，请明确问题？