Question

我正在制作一个图形计算器。我想用户保存他们写的任何有效等式。他们可以通过选择下拉菜单从保存的等式中进行选择。我遇到的问题是当我点击下拉菜单中的任何等式时，输入框不会更新。有没有办法可以点击任何方程更新输入框？这就是我所拥有的：

<!-- Input Box: -->
<label for="inputField">Enter values here. <br> <em>F(x)= (x+t)</em>
                    <input   id="inputField" value="sin(t+x)*tan(x-10)" autocomplete="off" size="20" class=" form-control prompt"> 
                 </label>

    <!-- Dropdown Menu -->
<label id="recevoirDonnee" for="DBpick"> Choose from Database 
                 <select  name="DBpick" id="DBpick" class="selectpicker" >
               while ($row = mysql_fetch_row($expressions)) {
                       echo "<option value=$row[1]>$row[1]</option>";
                    }
            </select>
   <script>


$('select').on('change', function() {
$("select option:selected").each(function () {
$('#inputField').val($(this).val()));
});
   </script>

我的问题是，当我在下拉列表中选择任何内容时，它不会更新输入字段。我的代码有什么问题。感谢。

Answer 1

尝试这样的事情：

$('select[name="DBpick"]').on('change', function() {
    $('#inputField').val($(this).val())
});

Working example here

您不需要.each()函数，因为一次只能选择一个值。

更新网址

您可以使用HTML5的新pushState功能更改整个网址和标题。但请注意，因为较旧的浏览器不支持此功能。例如，IE首先在版本10中支持它。这是一个list of supported browsers。要使用它，请尝试：

$('select[name="DBpick"]').on('change', function() {
    $('#inputField').val($(this).val());
    if (history.pushState) { // checks if supported
        window.history.pushState(null, "New Page Title", "?"+$(this).val());
    }
});

或者，您只需更改网址末尾的HASH即可。例如，要更改：

mydomain.com/my-page.html#old
// to
mydomain.com/my-page.html#new

使用此：

$('select[name="DBpick"]').on('change', function() {
    $('#inputField').val($(this).val());
    window.location.hash = $(this).val();
});

从数据库填充的下拉菜单中更新输入字段

1 个答案: