Question

我已经找到了解决这个问题的办法，但是已经做空了;它与通常的解决方案有点不同。

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

<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），而是标签（中间名），我无法找到它。

有人能帮忙吗？谢谢！

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 个答案: