Question

我有代码，我尝试用select回显onclick的值。

我有一个select从数据库中获取数据。现在我希望我点击的选项回显到文本框中。但我失败了。

这是我的代码：

<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
    <title>Popup contact form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="js/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script>
    function get_main_sector(myid){
        var id = document.getElementById("segment_id").value;
        alert(id);
        $(document).ready(function() {
            $("#segment_id")({
                onSelect: function(Text, inst) {
                    $("#dt_title input[type='text']").val($("#dt_title input[type='text']").attr('data-title')+Text);
                }
            })
        });
    }  
    </script>
</head>

<body>
<span id="spanSegmentData">
    <select name="segment_id" id="segment_id" STYLE="width: 300px"  onchange="get_main_sector(this.value)">
        <option value="">[--Select Segment------]</option>
        <?php
        if(is_array($segments) && !empty($segments)) {
            foreach($segments as $segment) {
                echo '<option value="'.$segment->ID.'"';
                echo '>';
                echo $segment->title;
                echo '</option>';
            } 
        }           
        ?>
    </select>
</span>

<span id="dt_title">
    <input name="title" type="text" value=" MB | <?php echo $segment->title;?> | " data-title="MB | <?php echo $segment->title;?> | " style="width:300px"/ readonly>
</span>
</body>

</html>

Answer 1

为此，你不需要php。它完成了客户端。

获取选择项目的价值：

$("#idoftheselect").val();

获取选择的选项文本：

$("#idoftheselect").find(":selected").text();

设置输入值：

$("#idoftheinput").val("All your string content or var");

这是一个例子：

＆＃13;

$(".myselect").change(function(){
  var res = $(".myselect").find(":selected").map(function () {
    if($(this).val()!="")
      return $(this).text();
    else
      return "";
   }).get().join(" ");
  
   $("#inputid").val(res);

 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="myselect">
  <option value="">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
<select class="myselect">
  <option  value="">Choose</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
</select>
<input type="text" id="inputid" placeholder="Here selected item">

＆＃13;

Answer 2

如果您尝试将所选项目值添加到文本框中，请完全删除此部分代码（我认为这没用）

 MB | <?php echo $segment->title;?> | "data-title="MB | <?php echo $segment->title;?> |

您的回答=＆gt;

从select元素中删除“onchange”事件：

<select name="segment_id" id="segment_id" STYLE="width: 300px">

内部脚本（将此脚本区域放在代码的末尾......更好的方式）

 <script>

 $( document ).ready(function() {
      $("#segment_id").on('change', function () {

            var id = document.getElementById("segment_id").value;
            alert(id);

            $("#title").val($$("#segment_id option:selected").text());
        });
 }); 
</script>

完整的答案将是：

    <?php
            require_once('functions.php');
                    $cont = new pacra3();
                    $segments = $cont->getSegment();
           ?>

            <!DOCTYPE html>
            <html>
            <head>
            <title>Popup contact form</title>
            <link rel="stylesheet" type="text/css" href="style.css">
              <link rel="stylesheet" href="js/jquery-ui.css">
              <script src="js/jquery-1.10.2.js"></script>
              <script src="js/jquery-ui.js"></script>

             </head>
            <!-- Body Starts Here -->
            <body>
            <span id="spanSegmentData">
            <select name="segment_id" id="segment_id" STYLE="width: 300px">
                            <option value="">[--Select Segment------]</option>

                            <?php
                          if(is_array($segments) && !empty($segments))
                            {
                                foreach($segments as $segment)
                                {
                                    echo '<option value="'.$segment->ID.'"';
                                    echo '>';
                                    echo $segment->title;
                                    echo '</option>';
                                } 
                            }           
                            ?>
                        </select>
                        </span>

                        <span id="dt_title"> <input name="title" type="text" value="" data-title="" style="width:300px"/ readonly> </span>


        <script type="text/javascript">

            $(document).ready(function () {

        $("#segment_id").on('change', function () {

                        var id = document.getElementById("segment_id").value;
                        alert(id);

                        $("#title").val($$("#segment_id option:selected").text());
                    });


                 }); 
                </script>

                </body>


                </html>

Answer 3

更新了代码

＆＃13;

 $("#segment_id").change(function () {
			var id = $(this).val(); 
			$("#title").val($("#segment_id option:selected").text());
		});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanSegmentData">
    <select name="segment_id" id="segment_id" STYLE="width: 300px" >
                    <option value="">[--Select Segment------]</option>
<option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
                  
                </select>
                </span>

                <span id="dt_title"> <input id="title" name="title" type="text" value=" "

                data-title="MB" style="width:300px" readonly> </span>

＆＃13;

如何将select的值回显到文本框

3 个答案: