Question

基本上我只想通过下拉框设置一个值，然后回显它旁边的值，理想情况下没有提交按钮并在同一页面中。

<select name="price" action="post" id="mySelect">
<option value="100">Option 1</option>
<option value="120">Option 2</option>
<option value="115">Option 3</option>
<option value="135">Option 4</option>
<option value="80" >Option 5</option>
</select>

echo "£ $price"

我一直在寻找一种方法来做到这一点，大多数解决方案都将值反映到选择中。我确信有更好的方法可以做到这一点，所以任何链接都会受到赞赏！

Answer 1

你必须使用javascript而不提交。

<select name="price" action="post" id="mySelect" onChange="document.getElementById('selectedValue').innerHTML = this.value;">
<option value="100">Option 1</option>
<option value="120">Option 2</option>
<option value="115">Option 3</option>
<option value="135">Option 4</option>
<option value="80" >Option 5</option>
</select>
<p>£ <span id="selectedValue"></span></p>

Answer 2

使用jQuery：

$(document).on('change', '#mySelect', function(){
    $('#DisplayValueSomewhereID').html($('#mySelect').val());
});

页面上的某个地方：

<div>&pound;<span id='DisplayValueSomewhereID'>0.00</span></div>

Answer 3

<html>
  <head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

    <select name="price" action="post" id="mySelect" onchange="return show_price(this.value);">
    <option value="100">Option 1</option>
    <option value="120">Option 2</option>
      <option value="115">Option 3</option>
    <option value="135">Option 4</option>
    <option value="80" >Option 5</option>
    </select>

    <div>&pound; <span id="price_sp"><span></div>
<script>
    function show_price(price)
    {
        document.getElementById('price_sp').innerHTML = price;
    }
 </script>
</body>
</html>

Answer 4

添加表单
向表单添加提交按钮（您必须有一些方法告诉浏览器将表单数据发送到服务器）
从$_POST[]（如果存在）
保护自己免受XSS攻击

这样：

<form method="post">
<select name="price" id="mySelect">
<option value="100">Option 1</option>
<option value="120">Option 2</option>
<option value="115">Option 3</option>
<option value="135">Option 4</option>
<option value="80" >Option 5</option>
</select>
<input type="submit">
</form>

<?php
    if (isset($_POST['price'])) {
        echo "$";
        echo htmlspecialchars($_POST['price']);
    }

在同一页面中显示HTML选择值

4 个答案: