根据选择选项标签更改输入值

Question

我一直在寻找解决方案，但是结果很短。 它与通常的解决方案有点不同。

我正在构建一个PHP Graph系统，作为其设置功能的一部分，我需要能够使用1个“选择”输入提交到MySQL数据库中的2列。 用户看到对眼睛友好的下拉菜单，选择对眼睛友好的选项，并添加了两个必需的值。 提交的一个值需要引用sql格式的列名（例如col_1），而另一个值必须是它的醒目标签（“列1”）。 因此，对于以下示例：

<select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title"></input>

将所选值自动输入到隐藏的inout很容易，但是我需要所选选项的标签（如果是它的名称）才能自动输入到隐藏的输入#col_title中。 因此，不是所选择的值（例如EG Middle_name），而是标签（Middle Name）（我找不到很多）。

有人可以帮忙吗？ 谢谢！

Answer 1

使用.text()获取元素的文本。 :selected修饰符将选择选定的选项。

var label = $("#col_name option:selected").text();
$("input[name=col_title]").val(label);

Answer 2

尝试这个

HTML：

<select name="col_name" id="col_name">
    <option value="first_name">First Name</option>
    <option value="middle_name">Middle Name</option>
    <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title" id="textbox" />

jQuery的：

// init
$('#textbox').val($('#col_name option:selected').text());
//on selecting
$('#col_name').on('change', function() {
    $('#textbox').val($(this).find('option:selected').text());
});

工作示例： https : //jsfiddle.net/a3qk1s7g/

Answer 3

一种实现方法是使用JQuery，如下所示：

<html>
<head>
<title>Try</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" type='text/javascript'></script>
</head>
<body>  

    <select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
    </select>

    <input type="hidden" name="col_title" id="col_title"></input>

    <script type='text/javascript'>

        $("#col_name").change(function(){

            $("#col_name").children().each(function(){

                if(this.value == $('#col_name').val()){

                    $("#col_title").val(this.innerHTML);
                }

            });

            // console.log($("#col_title").val());

        });

    </script>
</body>

上面的代码在找到所选选项时侦听更改，并将其值复制到标签中；

根据选择选项标签更改输入值

问题描述

3 个解决方案

解决方案1
3 2016-08-24 18:08:50

解决方案2
1 已采纳 2016-08-24 18:10:12

解决方案3
0 2016-08-24 18:28:34

根据选择选项标签更改输入值

问题描述

3 个解决方案

解决方案1 3 2016-08-24 18:08:50

解决方案2 1 已采纳 2016-08-24 18:10:12

解决方案3 0 2016-08-24 18:28:34

解决方案1
3 2016-08-24 18:08:50

解决方案2
1 已采纳 2016-08-24 18:10:12

解决方案3
0 2016-08-24 18:28:34