Question

人。我制作了一个自定义下拉列表，但无法正确获得其价值。

所以基本上我需要保存所选下拉元素的值，并在表单中将其与其他数据一起使用。

任何想法如何解决这个问题？

<form method="post" action="/subscribed.php">
  <ul>
    <li>
      <input type="name" placeholder="Name" name="name" id="name" />
    </li>
    <li>
      <input type="email" placeholder="Your email" name="email" id="email" />
    </li>
    <li>
      <input type="hidden" name="data-value" id="data-value">
      <div class="wrapper-demo">
        <div id="dd" class="wrapper-dropdown-3" tabindex="1">
          <span>Option</span>
          <ul class="dropdown">
            <li><a href="option1" data-value="option1">option1</a></li>
            <li><a href="option2" data-value="option2">option2</a></li>
            <li><a href="option3" data-value="option3">option3</a></li>
            <li><a href="option4" data-value="option4">option4</a></li>
            <li><a href="option5" data-value="option5">option5</a></li>
          </ul>
        </div>
      </div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script type="text/javascript">
      function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.dropdown > li');
        this.val = '';
        this.index = -1;
        this.initEvents();
      }
      DropDown.prototype = {
        initEvents : function() {
        var obj = this;
        obj.dd.on('click', function(event){
          $(this).toggleClass('active');
          return false;
        });
      obj.opts.on('click',function(e){
        var opt = $(this);
        var el = e.target;
        obj.val = opt.text();
        obj.index = opt.index();
        obj.placeholder.text(el.getAttribute("data-value"));
        $('data-value').val(el.getAttribute("data-value"));
        });
        },
      getValue : function() {
        return this.val;
      },
      getIndex : function() {
        return this.index;
      }
      }
      $(function() {
        var dd = new DropDown( $('#dd') );
        $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-3').removeClass('active');
      });
      });
      </script>
    </li>
    <li>
      <input type="submit" value="Submit" />
    </li>
  </ul>
</form>

Answer 1

您使用的$('data-value')是错误的选择器，请使用$('#data-value')，

如果您选择使用id，则在此之前输入＃。 $('#elementid');

Demo

如何从自定义下拉列表中获取价值？

1 个答案: