Friday, August 28, 2015

A view drop down having values filtered from models

Hie,

I'm trying to do this. A view with Three drop down lists like
<Parent> - <Child> - <Child's Child>

The values in the list should be from model values. Or a separate things. I just want to capture the results and store the results in a db.

so far I've messed up with this example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <title>Update Drop-Down Without Refresh</title>
      <script type="text/javascript" charset="utf-8">
          function FilterModels() {
              var makeslist = document.getElementById('makes');
              var modelslist = document.getElementById('models');
              var make_id = makeslist.options[makeslist.selectedIndex].value;
              var modelstxt = new Array();
              modelstxt[1] = "1\tEscort\n2\tTaurus";
              modelstxt[2] = "1\tAltima\n2\tThilip";
              var models = modelstxt[make_id].split("\n");
              for (var count = modelslist.options.length-1; count >-1; count--){
                  modelslist.options[count] = null;
              }
              for (i=0; i<models.length; i++){
                  var modelvals = models[i].split("\t");
                  var option = new Option(modelvals[1], modelvals[2], false, false);
                  modelslist.options[modelslist.length] = option;
              }
          }
      </script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style>
    .col-centered{
          float: none;
          margin: 0 auto;
      }
    </style>

  </head>
  <body>
    {% load bootstrap3 %}
      <p>This is a proof of concept to update a select (drop-down) list of values, based on the selection of another select (drop-down) element using ajax.</p>
      <form action="" method="POST" accept-charset="utf-8">
         {form.as_p}
        {% csrf_token %}
          <select name="makes" onchange="FilterModels()" id="makes">
              {%for i in cd %}
              {{i}}
              {%endfor%}
          </select>
          <select name="models" id="models">
              <option>Choose Make</option>
          </select>

     <input type="submit" value="Submit"/>

      </form>
  </body>
</html>


Can anyone help. .?

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To post to this group, send email to django-users@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/83af4015-68b1-413f-ab9f-1cea14bcd33d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment