将值变量检索到jquery中

时间：2015-09-28 10:12:18

标签： jquery mysql ruby-on-rails ruby-on-rails-4

我有这段代码：

  <div class="field">
    <%= f.label "Sous catégorie" %><br>
    <%= select_tag "incident[sous_category_id]", option_groups_from_collection_for_select(@categories, :sous_categories, :name, :id, :name), include_blank: "Choisissez :"%>
  </div>

其中:sous_categories是来自mysql的表。此表包含：＆＃39; id＆＃39;，＆＃39; name＆＃39;，＆＃39; category_id＆＃39;，＆＃39; lvl_urgence_max＆＃39;。

那么，我该如何检索列＆lt; lvl_urgence_max＆＃39;用于在脚本中进行测试，例如：

<script type="text/javascript">
  $('#incident_sous_category_id').change(function () {
      for (var i = 0; i < $(this).val(); i++) {
        $('#rdioBtn').append('<input type="radio" name="radio_group" value="' + i + '"/>');
      }
    });
</script>

与“＆lt; lvl_urgence_max”相比，我尝试动态创建按钮广播。值

抱歉我的英文不好，谢谢你。

编辑：

    <!DOCTYPE html>
<html>
<head>
    <title>Créer un incident - Tick{Master}</title>
<link rel="stylesheet" media="all" href="/assets/application.self-ee94b7bcd6d3f3b1b3490d4b601d90c9500b34338fd09eda00fbde15928d3933.css?body=1" data-turbolinks-track="true" />
<script src="/assets/jquery.self-d03a5518f45df77341bdbe6201ba3bfa547ebba8ed64f0ea56bfa5f96ea7c074.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/affix.self-f7aef9d98ee5ece34a6a92a6a15bba777d93e8d908b75c95a85088277f394200.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/alert.self-896ab026e6823f5cef2441e07dac53d0692a5b772ac58b1ce20aa624c342d3f4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/button.self-d19f3e2bcd3a7a4d75c11b9141b3fabd2c11987da1e99c85548ec3ecf8db30c3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/carousel.self-b2e5e14483e6c31343a83861b7d487620f143d6fc2d07d5ae7544b6b225ba6be.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/collapse.self-93820e9b486e375a7fb4477602def3a6f8381fa6d50938d5378297ffbe4a1248.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/dropdown.self-30536ae4d54b2685c26b5787ed0eb549a9075717fe690cce6270873bedf2df00.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/tab.self-9b77df34cbbb08ec93a806d6cdb741f04e3dbf3389978a0679146f2d2987bc89.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/transition.self-9616c4e856b57659b67da3c6f2adcd584b5601ef4bebcdadab8ebb387d80bb25.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/scrollspy.self-c5c6ed008955656d345067e9821d79f1216b8383134d08465d4aa1a33a2b93b4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/modal.self-bcfe54f3132bf16a8c5ce4289e47eba488f6522a08f49f378a037061c6c7aa4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/tooltip.self-3aa41fbe871573b34e0ebddf31598cd5a11a9841ca85f90934ea46326e46626d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/popover.self-b73e9c9111d01148e24bbc46e096782e024dc5db630e7078cf11ed2587ef8551.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sprockets.self-fbfa5ad7d9aa0afe439ec4ff3883acc4cb92b62cb67c40d674320c9aa1d4642d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-ca5248a2fad13d6bd58ea121318d642f195f0b2dd818b30615f785ff365e8d1f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/categories.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/fonctions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/incidents.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/pages.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/responses.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/sessions.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/sous_categories.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/teches.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-f8806224e027f3e3f0138ea9ce99319e298dfdb323304d1f1be6eae8e8c74724.js?body=1" data-turbolinks-track="true"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="BoXHZqx7CzEN0kuFC1zsS1AQHezA1coWCSPxn03DHSh/Ol0cGnPs3dDVZjD1+aqZ1pNbY0EaV/v+Sehe20y/ug==" />
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'>
    <script src="js/jquery-2.1.4.min.js"></script>
</head>
  <body id="interface"></body>

  <!--Header-->
<header>
      <nav class="navbar-perso navbar navbar-default nav-collapse">
      <div class="container-fluid">
        <div class="navbar-header">
      <button type="button" class="navbar-toggle c-hamburger c-hamburger--htx" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" data-toggle="collapse">
        <span>Toggle menu</span>
      </button>
        <a class="title navbar-brand" href="/pages/home">Tickmaster</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle navbar-btn button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tickets d'incidents <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a class="navbar-btn button" data-method="get" href="/users/1">Mes incidents</a></li>
          <li><a class="navbar-btn button" data-method="get" href="/incidents/new">Poster un nouvel incident</a></li>
        </ul>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle navbar-btn button" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Administration <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a class="navbar-btn button" data-method="get" href="http://localhost:3000/users">Utilisateurs</a></li>

          <li><a class="navbar-btn button" data-method="get" href="http://localhost:3000/rights">Droits</a></li>

          <li><a class="navbar-btn button" data-method="get" href="http://localhost:3000/fonctions">Fonctions</a></li>

          <li><a class="navbar-btn button" data-method="get" href="http://localhost:3000/categories">Categories</a></li>

          <li><a class="navbar-btn button" data-method="get" href="http://localhost:3000/incidents">Tous les tickets d&#39;incidents</a></li>
        </ul>
      </li>

      <li><a class="navbar-btn button" data-method="get" href="/signout">Se déconnecter</a></li>

  </ul>
</nav>
</div> <!-- /.navbar-collapse -->
</div>  <!-- /.container-fluid -->
</header>

  <!--Header-->

<h2>Créer un incident</h2>

<form class="new_incident" id="new_incident" enctype="multipart/form-data" action="/incidents" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="fL+sWBXux5I+LG7QRlvEDNqcDNelar19iH0xt5bAerwFADYio+YgfuMrQ2W4/oLeXB9KWCSlIJB/Fyh2AE/YLg==" />
<div class="field">
  <label for="incident_Objet">Objet</label><br>
  <input type="text" name="incident[title]" id="incident_title" />
</div>
<div class="field">
  <label for="incident_Description">Description</label><br>
  <textarea name="incident[content]" id="incident_content">
</textarea>
</div>
<div class="field">
  <label for="incident_Catégorie">Catégorie</label><br>
  <select name="incident[category_id]" id="incident_category_id"><option value="">Choisissez :</option><option value="1">Logiciel</option>
<option value="2">Matériel</option>
<option value="3">OS</option></select>
  <!--, :onchange =>"recupere_valeur(); parent.location='javascript:location.reload();'")%>-->
</div>
<div class="field">
  <label for="incident_Sous catégorie">Sous catégorie</label><br>
  <select name="incident[sous_category_id]" id="incident_sous_category_id"><option value="">Choisissez :</option><optgroup label="Logiciel"><option value="1">Firefox</option>
<option value="4">Emails</option></optgroup><optgroup label="Matériel"><option value="2">MotherBoard</option></optgroup><optgroup label="OS"><option value="3">Android</option></optgroup></select>
  [4, 10, 6, 7]
</div>
<div class="field" id="rdioBtn">
  <label for="incident_Niveau d&#39;urgence">Niveau d&#39;urgence</label><br>
</div>
<div class="field">
  <label for="incident_Images">Images</label><br>
  <input type="file" name="incident[image]" id="incident_image" />
</div>
<div class="actions">
  <input type="submit" name="commit" value="Envoyer" />
</div>
</form>
<script type="text/javascript">
  $('#incident_sous_category_id').change(function (e) {
      for (var i = 0; i < $(this).val(); i++) {
        $('#rdioBtn').append('<input type="radio" name="radio_group" value="' + i + '"/>');
        alert(e.target.value.name);
      }
    });
</script>


<a href="/incidents">Back</a>



  <!--Contenu-->


  <!--Footer-->
  <script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
      $(".navbar-toggle").on("click", function () {
          $(this).toggleClass("active");
      });
  });
</script>

<script>
(function() {

"use strict";

var toggles = document.querySelectorAll(".c-hamburger");

for (var i = toggles.length - 1; i >= 0; i--) {
  var toggle = toggles[i];
  toggleHandler(toggle);
};

function toggleHandler(toggle) {
  toggle.addEventListener( "click", function(e) {
    e.preventDefault();
    (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active");
  });
}

})();
</script>

  <!--Footer-->
  <div class="img-cle" src="cle.png">
  </div>
  <script>
  var currentBoxNumber = 0;
$("#next").keypress(function (event) {
  if (event.keyCode == 13) {
      textboxes = $("input.next");
      currentBoxNumber = textboxes.index(event.target);
      if (textboxes[currentBoxNumber + 1] != null) {
          nextBox = textboxes[currentBoxNumber + 1];
          nextBox.focus();
          nextBox.select();
          event.preventDefault();
          return false;
      }
  }
});
  </script>

</body>
</html>

1 个答案:

答案 0 :(得分：0)

使用parseInt()方法将值转换为数字。否则它会将其视为仅字符串

for (var i = 0; i < parseInt($(this).val()); i++) {
        $('#rdioBtn').append('<input type="radio" name="radio_group" value="' + i + '"/>');
      }

您也可以使用jquery创建元素

for (var i = 0; i < parseInt($(this).val()); i++) {
    var input = $("<input/>", {
        'type': 'text',
        'name': 'radio_group',
        'value': i
    });
    $('#rdioBtn').append(input);
}
相关问题
最新问题