Question

我现在已经找了很长一段时间，但似乎无法找到一个全面的答案。我在下面有HTML代码，并希望将input name="ytcustom"的输入值添加到option value="https://url.com/custom/"

实现这一目标的有效方法是什么？

<select id="youtube_dropdown">
<option value="https://url.com/mix/">Mix</option>
<option value="https://url.com/custom/">Custom</option>
</select>
<input name="ytcustom" id="ytcustom" type="text" class="ythide">

Answer 1

以下是我的答案的最终版本：使用onkeyup事件并使用#youtube_dropdown > option:last选择一个选项元素（尽管我会尽可能使用ID选择器）：

$(function() {
  $("#ytcustom").on("input", function() {
    var customUrl = 'https://url.com/custom/' + $(this).val();
    $("#youtube_dropdown > option:last").val(customUrl);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="youtube_dropdown">
<option value="https://url.com/mix/">Mix</option>
<option value="https://url.com/custom/">Custom</option>
</select>
<input name="ytcustom" id="ytcustom" type="text" class="ythide">

Answer 2

尝试此更新版本

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#btnAdd").click(function(){
        var val=$('#ytcustom').val()
$("#optionID").val('https://url.com/custom/' + val);
            val=$('#ytcustom').val('');
            alert('Data Added');
        });
    });
    </script>
    </head>
    <body>

    <select id="youtube_dropdown">
    <option value="https://url.com/mix/">Mix</option>
    <option id="optionID" value="https://url.com/custom/">Custom</option>
    </select>
    <input name="ytcustom" id="ytcustom" type="text" class="ythide">
    <button id="btnAdd">ADD</button>

    </body>
    </html>

没有点击按钮

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("#ytcustom").change(function(){
        var val=$(this).val()
$("#optionID").val('https://url.com/custom/' + val);
            val=$(this).val('');
            alert('Data Added');
        });
    });
    </script>
    </head>
    <body>

    <select id="youtube_dropdown">
    <option value="https://url.com/mix/">Mix</option>
    <option id="optionID" value="https://url.com/custom/">Custom</option>
    </select>
    <input name="ytcustom" id="ytcustom" type="text" class="ythide">
    <button id="btnAdd">ADD</button>

    </body>
    </html>

Answer 3

在文本框焦点上删除并添加attribute自定义选项。

＆＃13;

$("#ytcustom").focusout(function() {
  var str = $('#ytcustom').val();
  var lastValue = $('#youtube_dropdown option:last-child').val();
  var newValue = lastValue + str;
  $('#youtube_dropdown option:last-child').removeAttr('value');
  $('#youtube_dropdown option:last-child').attr('value', newValue);
  console.log($('#youtube_dropdown option:last-child').val());


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="youtube_dropdown">
<option value="https://url.com/mix/">Mix</option>
<option value="https://url.com/custom/">Custom</option>
</select>
<input name="ytcustom" id="ytcustom" type="text" class="ythide">

＆＃13;

使用JQuery将输入值添加到选项值？

3 个答案: