如何根据下拉列表添加内容？

Question

我有一个下拉列表（其中包含URL或SSH）。

每当用户输入内容时，例如：192.168.2.1

如果选择网址，我想附加 http：// ，当选择 SSH 时， ssh：/ < / strong> /应该＆＃34;追加＆＃34;到IP地址。

我的代码：

<div class="form-group">
    <label for="name-in" class="col-md-3 label-heading">
        <select name="urloption" style="width: 100px;">
            <option value="URL">URL</option>
            <option value="URL">SSH</option>
        </select>
    </label>
    <div class="col-md-6">
        <input type="text" class="form-control" id="name-in" name="urldata" value="" placeholder="Enter your Lab info">
    </div>
</div>

我的尝试：

我创建了一个类，基于点击，我可以这样做吗？

$("input").keyup(function() {
    $(".dynamic").html(this.value);
});

如何使用HTML执行此操作？

Answer 1

您需要做的是在两个输入元素上捕获一个事件，然后根据每个选择和事件更改文本。

$("input").keyup(function() {
    $(".dynamic").html($('select').val().toLowerCase() +'://' + this.value);
});
$('select').on('change', function(){
    $(".dynamic").html(this.value.toLowerCase() +'://'+ $('input').val());
});

Here's the jsFiddle