返回表单会生成一个单独的div标签

时间:2017-03-30 16:38:02

标签: 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>

1 个答案:

答案 0 :(得分:1)

&#13;
&#13;
$('#select').on('change', function() {
  $('#result').html( $(this).find('option:selected').text() )
});
&#13;
<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>
&#13;
&#13;
&#13;