選択の値をテキストボックスにエコーする方法

debugcn 投稿 Dev

晴れ

私はの値エコーしようとしているコード持っている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>

アレクシス

そのためには、phpは必要ありません。それはクライアント側で行われます。

選択したアイテムの値を取得します。

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

選択したオプションテキストを取得します。

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

入力値を設定します：

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

ここに例があります：

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

 });

<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">

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]