Question

我目前正在创建一个允许用户选择服务的页面，然后服务信息将显示在下面的textarea上。我做过这部分。我想要的是当用户选择服务时，将填写描述文本框以及价格。

这是前端：

<div class="container">
      <div class="col-md-6">
        <label for="menu" class="control-label">Service</label>
         <select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done form-control" autofocus>
            <option value="" hidden disabled selected></option>
            <option value="1" data-id="Newly purchased computer? We will do the setup for you. We will configure and install your computer's software and troubleshoot your hardware. Clean up of utility shortcuts is also a part of our service. We will remove inappropriate software and application that may cause conflict to your computer. Demonstration of basic functionality will also be provided. Our trained experts will do all the complex work so you can fully enjoy your new computer.">Computer Setup</option>
            <option value="2" data-id="As computers improve so does the limits of what you can do with them. New software makes use of these extra abilities. We will help you on finding a software that fits to your computer. We will verify your computer's compatibility, install software title and software updates if necessary. We will create a utility shortcut for you and examine if the software functions properly with your computer. Installation of software will fix the current bugs and will stop the computer from experiencing faults or crashing.">Software Install and Setup</option>
            <option value="3" data-id="Need assistance on how to connect your peripherals and make it work with your computer? We will setup and configure necessary software and test the functionality of the devices if it is compatible wih your computer. Our communicative or outgoing or responsive tech specialist are willing to respond to your questions and concerns about your computer peripherals' functions and features.">Setup of Peripheral Devices</option>
            <option value="4" data-id="No matter how high speed your computers may seem when it is new, it is expected to slow down over time. After you install a lot of programs and download different kinds of item from the internet, little by little your computer slows down without your awareness. There is a way to solve this problem without spending a big money. Regular tune up on your computer will eliminate the crashing, freezing and and impace the overall health of your computer.">Computer Tune Up Service</option>
            <option value="5" data-id="Your sensitive information may be at risk by having malicious software or viruses invading your computer and privacy. We can provide an anti-virus solution to help protect your computer, personal data and privacy. Our techenical specialist uses advanced techniques in order to provide technical solutions to a wide range of difficult problems. Virus & Spyware Removal may improve the performance of your computer and ensures your computer remains virus-free.">Virus and Spyware Removal</option>
            <option value="5" data-id="The loss of your personal files or business data can be disastrous. Secure your files with our Data backup service. We will install a back up to your computer and manage its default data feature. With just a few mouse clicks, specific lost or corrupted files can be restored allowing you to get back to business quickly and easily.">Data Backup / Transfer</option>
            <option value="5" data-id="Wireless networking is an essential productivity tool for today's mobile workforce. If your desire is to have a wireless network at your home, we will help you in setting it up. We will configure your computer's network setting for 1 router, setup internet service provider and connect the router to the modem. Our professional agents will assist you in securing your network so no one else can access your network without your permission. Wireless network will enable devices to connect to the Internet without needing to plug in a cable.">Wireless Networking
            </option>
      </div>  </select>




      <div class="control-group formSep template">
        <div class="col-md-12">
          <label for="input01" class="control-label top">Service Description:</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-file-text-o"></i></span><textarea rows="8" id="title" name="criteria_rate" size="30" type="text" class="criteria_rate span2 form-control text-justify" value="" readonly></textarea>
          </div>

          <label for="input01" class="control-label top">Quantity</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-shopping-cart"></i></span><input type="text" rows="4" size="30" type="text" class="form-control text-justify" value="">
          </div>

          <label for="input01" class="control-label top">Price</label>
           <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-tag"></i></span><input type="text" class="form-control text-justify" value="" />
          </div>

          <label for="input01" class="control-label top">Comment</label>
          <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-comments"></i></span><textarea rows="7" class="form-control text-justify" value=""></textarea>
          </div>
        </div>
      </div>
  </div>

功能：

$(document).ready(function(){
    $('#chosen_a').change(function(){
    var criteria_id =  $(':selected',this).data('id');
    $('.criteria_rate').val(criteria_id);
    });
  });

P.S。：不介意价值观，我还在测试它。

Answer 1

如果我是你，我会使用select as键中的值创建一个包含所有信息的对象：

var values = {
  "1": {
    "price": "100",
    "description": "Important"
  },
  "2": { ... }
}

然后，挂钩到change事件并使用所选选项的值来查找相关详细信息：

$("select").on("change", function(){
  var key = $("#myselect option:selected").val();
  var details = values[key];
  $("#description").val(details.description);
  $("#price").val(details.price);
  ...
});

通过这种方式，您可以将所有内容保存在一个位置（例如，单独的文件），并删除所有难以阅读和难以维护的数据属性。

使用jQuery使用单个选择菜单填充2个文本框

1 个答案: