Javascript 获取jQuery对象数组中的项以显示在div onclick中_Javascript_Jquery

Javascript 获取jQuery对象数组中的项以显示在div onclick中

javascript jquery

Javascript 获取jQuery对象数组中的项以显示在div onclick中,javascript,jquery,Javascript,Jquery,我有一个对象数组，它在用户开始键入时为他们提供一个建议列表。我希望发生的是，当用户选择他们想要的建议并单击提交按钮时，与该建议相关的价格将显示在搜索栏下的中。到目前为止，我一直不成功 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Device Recycling</title> <link rel="stylesh

我有一个对象数组，它在用户开始键入时为他们提供一个建议列表。我希望发生的是，当用户选择他们想要的建议并单击提交按钮时，与该建议相关的价格将显示在搜索栏下的

中。到目前为止，我一直不成功

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Device Recycling</title>
  <link rel="stylesheet" href="/device_recycle.css">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
    var projects = [
      {
        Device: "iPhone",
        Price1: "$299",
        Price2: "$199"
      },
      {
        Device: "iPhone 2",
        Price1: "$199",
        Price2: "$99"
      }
    ];

    $( "#device" ).autocomplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#device" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#device" ).val( ui.item.value );
        $( "#price1" ).val( ui.item.price1 );
        $( "#price2" ).html( ui.item.price2 );


        return false;
      }
    })



    $("#submit").click(function(){
     $( "#Price" ).append(  item.Price1 );
     });
  </head>
<body>

 <h1 id="font1">Quick Device Qoute</h1>
<div class="FormContainer">




  <input id="device"/>

  <input id ="submit" type="image" src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat-one-color/128/magnifying-glass-icon.png" alt="Submit button">
  <div id="ATT_Button" class="hidden"> 
     <input id ="ATT" type="image" src="http://classlawyer.lawyer/wp-content/uploads/2015/12/ATT-Logo-Image-Labeled-for-Reuse.png" alt="Submit button">
  </div>
  <div id="VZW_Button" class="hidden"> 
     <input id ="VZW" type="image" src="http://educationinactionri.org/Portals/0/Uploads/Images/Verizon_small.jpg" alt="Submit button">
  </div>
  <div id="Price"></div>

 </div>

</body>
</html>


设备回收
$（函数（）{
var项目=[
{
设备：“iPhone”，
价格1:“$299”，
价格2:“199美元”
},
{
设备：“iPhone 2”，
价格1:“$199”，
价格2:“$99”
}
];
$（“#设备”）。自动完成({
最小长度：0，
资料来源：项目，
焦点：功能（事件、用户界面）{
$（“#设备”）.val（ui.item.label）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#设备”）.val（ui.item.value）；
$（“#价格1”）.val（ui.item.price1）；
$（“#price2”）.html（ui.item.price2）；
返回false；
}
})
$（“#提交”）。单击（函数（）{
$（“#价格”）。附加（第1项价格）；
});
快速装置Qoute

最终我想做的是，当用户点击submit时，它会在下面的

中显示

Price1

，但是他们可以点击另一个按钮，然后查看

Price2

。不过，在这一点上，我只需要在点击subm的

中找到

Price1

它是一个按钮。

您的javascript中有很多错误，您试图绑定到ID不存在的元素

我在这里放了一份工作副本，大致与您概述的内容相同：


$（函数（）{
var项目={
“iPhone”：{
价格1:“$299”，
价格2:“199美元”
},
“iPhone 2”：{
价格1:“$199”，
价格2:“$99”
}
};
变量列表=[
“iPhone”，
“iPhone 2”
];
$（“#设备”）。自动完成({
最小长度：0，
资料来源：名单，
焦点：功能（事件、用户界面）{
$（“#设备”）.val（ui.item.label）；
返回false；
},
选择：功能（事件、用户界面）{
$（“#设备”）.val（ui.item.value）；
$（#price1”）.val（ui.item.price1）；
$（“#price2”）.html（ui.item.price2）；
返回false；
}
});
$（“#提交”）。单击（函数（）{
$（“#价格”）.empty（）；
var device=$（“#device”）.val（）；
$（“#Price”）.append（projects[device].Price1）；
});
});

有关如何工作的详细信息，请参阅jQuery UI autocomplete文档：

能否提供完整的html文件和issue@Baskar，我已经更新了问题。

<input id="device" />

<input id="submit" type="image" src="http://icons.iconarchive.com/icons/elegantthemes/beautiful-flat-one-color/128/magnifying-glass-icon.png" alt="Submit button" width="50">

<div id="Price"></div>

<script>
    $(function() {
      var projects = {
        "iPhone": {
                            Price1: "$299",
                            Price2: "$199"
        },
        "iPhone 2": {
                            Price1: "$199",
                            Price2: "$99"
        }
      };

      var list = [
        "iPhone",
        "iPhone 2"
      ];

      $("#device").autocomplete({
        minLength: 0,
        source: list,
        focus: function(event, ui) {
          $("#device").val(ui.item.label);
          return false;
        },
        select: function(event, ui) {
          $("#device").val(ui.item.value);
          $("#price1").val(ui.item.price1);
          $("#price2").html(ui.item.price2);


          return false;
        }
      });

      $("#submit").click(function() {
        $("#Price").empty();

        var device = $("#device").val();
        $("#Price").append(projects[device].Price1);
      });
    });
</script>