javascript - 返回表单会产生一个单独的 div 标记

标签 javascript jquery html css forms

所以我想将用户的表单结果返回到一个 div 中,这样他们就可以使用 JQuery 查看他们在表单下选择的内容,但很难使用正确的代码?我尝试使用 .html 函数和 replaceWith。等等,但似乎没有任何效果?

这是我的 html 代码:

<form id="myform">
    <h4>Enter your booking slot here:</h4><br>
    <select id="programmes">
        <option value="test1">Test 1</option>
        <option value="test2">Test 2</option>
        <option value="test3">Test 3</option>
        <option value="test4">Test 4</option>
        <option value="test5">Test 5</option>
    </select><br><br>
    <select id="time">
        <option value="one">01:00</option>
        <option value="two">02:00</option>
        <option value="three">03:00</option>
        <option value="four">04:00</option>
        <option value="five">05:00</option>
        <option value="six">06:00</option>
        <option value="seven">07:00</option>
        <option value="eight">08:00</option>
        <option value="nine">09:00</option>
        <option value="ten">10:00</option>
        <option value="eleven">11:00</option>
        <option value="twevle">12:00</option>
        <option value="one-pm">13:00</option>
        <option value="two-pm">14:00</option>
        <option value="three-pm">15:00</option>
        <option value="four-pm">16:00</option>
        <option value="five-pm">17:00</option>
        <option value="six-pm">18:00</option>
        <option value="seven-pm">19:00</option>
        <option value="eight-pm">20:00</option>
        <option value="nine-pm">21:00</option>
        <option value="ten-pm">22:00</option>
        <option value="eleven-pm">23:00</option>
        <option value="midnight">00:00</option>
    </select><br><br>
    <button type="submit" value="Submit Booking">
</form>
</div>

<div></div>

最佳答案

$('#select').on('change', function() {
  $('#result').html( $(this).find('option:selected').text() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select">
  <option value="test_1">Test 1</option>
  <option value="test_2">Test 2</option>
  <option value="test_3">Test 3</option>
  <option value="test_4">Test 4</option>
  <option value="test_5">Test 5</option>
</select>

<div id="result"></div>

关于javascript - 返回表单会产生一个单独的 div 标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43123663/

相关文章:

html - Navbar Bootstrap 下拉菜单的问题

php - Codeigniter 中的 session 变量不起作用

javascript - Angular CanLoad 守卫只在第一次延迟加载时触发一次?

javascript - 引用错误: folders is not defined vue:6

javascript - 迭代所有 JSON 对象并放入 html

jQuery UI 对话框在拖动后停止自动调整大小

javascript - 如何在CSS中使用if语句,或者用javascript解决?

javascript - 从自定义提示中获取值(value)

javascript - 我希望我的 anchor 链接在 div 之前停止

javascript - 追加/添加到容器