javascript - 无法设置 onclick 输入字段的值

Question

我创建了这个自定义下拉列表，其中包含自定义单选按钮。我成功获取了所选单选按钮的值并将其设置为跨度标记。

我没有得到的是:我想在下拉列表中的输入字段中设置相同的值，但该值未设置。

我使用纯js和jquery来执行此操作，但该值是警报并且没有设置到输入字段中。

代码在这里:http://thekabir.in/onsitego-planlisting2017/index.html

步骤:点击“检查品牌”下拉列表并选择任何品牌。

使用的jquery和js是

//filters dropdown   
function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('div.dropdown li');
  this.val = '';
  this.index = -1;
  this.initEvents();
  }
  DropDown.prototype = {
  initEvents : function() {
      var obj = this;
      obj.dd.on('click',function(){
        $(this).toggleClass("active");
        $(this).parent().toggleClass("border-active");
        $('.filters').toggleClass('border-bottom');
        $(this).children('.dropdown').css('width',$(window).width());
        var deID = $(this);

        if(deID[0].id == 'devicebrand')
        {
          $('#devicebrand i.icon-down-arrow-1').addClass('icon-up-arrow-1').removeClass('icon-down-arrow-1');
        }
        return false;
      });
      obj.opts.on('click',function(e){
          // e.preventDefault();
          $(this).parent().addClass('hidden');
          $(this).addClass('active');
          var opt = $(this);
          obj.val = opt.text();
          obj.index = opt.index();
          obj.placeholder.text(obj.val);
          var currentID = $(this).parents('div.wrapper-dropdown-3')[0].id;

          if(currentID == 'devicebrand')
          {
            $('#devicebrand.wrapper-dropdown-3 .dropdown li').removeClass('active');
            $('#devicebrand.wrapper-dropdown-3 .dropdown li span').removeClass('icon-selected-radio-yellow').addClass('icon-oval-3-copy-3');
            $('#devicebrand i.icon-up-arrow-1').addClass('icon-tick-filled').removeClass('icon-up-arrow-1');
            $('.more-brands').addClass('hidden');
            $('.covered').removeClass('hidden');
            $('#manual-brand-input').val(obj.val);
          }
          $(this).children('span').removeClass('icon-oval-3-copy-3').addClass('icon-selected-radio-yellow');
          $(this).parent().toggleClass("border-active");
          $('.dropdown input').val('');
          e.stopPropagation();
      });
  },
  getValue : function() {
      return this.val;
  },
  getIndex : function() {
      return this.index;
  }
  };
  $(function() {
  var dd = new DropDown( $('#devicebrand') );
  $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-3').removeClass('active');
  });
  });

HTML:

<div class="filter check-brand">
    <div id="devicebrand" class="wrapper-dropdown-3" tabindex="1">
      <i class="icon icon-brand"></i>
      <span data-val="-1">check brand </span>
      <div class="dropdown brand">
        <span class="icon-cross-it"></span>
        <div class="side-info">
          <p class="SELECT-YOUR-MOBILE-P">SELECT YOUR MOBILE BRAND  </p>
          <p class="One-line-to-explain">One line to explain why he needs to select his city. Along with more information.</p>
        </div>
        <div class="city-selection">
          <ul>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="htc">HTC</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="motorola">motorola</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="xiaomi">xiaomi</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="lg">LG</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="samgsung">samgsung</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="sony">sony</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="huawei">huawei</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="google pixel">google pixel</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="nokia">nokia</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="le-eco">le-eco</a></li>
          </ul>
          <div class="more-brands">
            <a class="more-brands-btn" href="javascript:void(0);">+ 254 Brands</a>
          </div>
          <div class="manual-brand">
            <input placeholder="Enter your brand if not found above " id="manual-brand-input" class="manual-brand-input ui-autocomplete-input" value="" autocomplete="off" type="text"><span class="icon-shape_4"></span>
          <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul></div>
          <div class="covered hidden">
            <p><span class="icon-tick"></span>Congratulations! Free Pick &amp; Drop service available in your city</p>
            <p><span class="icon-tick"></span>400 Service centers near you</p>
            <p><span class="icon-tick"></span>20% of people bought this near your locality</p>
            <p><span class="icon-tick"></span>3days is average repair time in your area.</p>
          </div>
          <div class="not-covered hidden">
            <p><span class="icon-not-covered-tick"></span>Sorry, we are currently present in India. We don’t cover your City.</p>
            <p>We can briefly state here why we dont cover particular city. Or if at all we are in process of including it.</p>
          </div>
        </div>
      </div>
      <i class="icon-down-arrow-1"></i>
      <i class="icon-orange-cross hidden"></i>
    </div>
  </div>

这是同样的 fiddle 。 https://jsfiddle.net/kvab7wyd/1/

Answer 1

更新

将我的答案应用于OP的Fiddle

将您的值存储在变量中，然后将输入的值设置为等于该变量。你的方式不起作用，因为 document.getElementById('input').value 是纯 JavaScript 表达式，而 $(this).attr(data-) 是 jQuery表达式，如果混合它们，则必须使用 $(obj).get() 或点符号 $(obj)[0] 取消引用 jQuery，尽管我我不完全确定这样做是否值得。顺便说一句，当使用不会去任何地方的链接时，请使用 e.preventDefault() ，这将阻止点击它们时令人恼火的跳跃。我还使用了 .data() 而不是 .attr()，无论哪种方式，结果都是相同的，但 .data() 看起来更干净。

片段

$('.dropdown li a').on('click', function(e){
    var data = $(this).data('val');
    e.preventDefault();
  document.getElementById('manual-brand-input').value = data;
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter check-brand">
    <div id="devicebrand" class="wrapper-dropdown-3" tabindex="1">
      <i class="icon icon-brand"></i>
      <span data-val="-1">check brand </span>
      <div class="dropdown brand">
        <span class="icon-cross-it"></span>
        <div class="side-info">
          <p class="SELECT-YOUR-MOBILE-P">SELECT YOUR MOBILE BRAND  </p>
          <p class="One-line-to-explain">One line to explain why he needs to select his city. Along with more information.</p>
        </div>
        <div class="city-selection">
          <ul>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="htc">HTC</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="motorola">motorola</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="xiaomi">xiaomi</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="lg">LG</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="samgsung">samgsung</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="sony">sony</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="huawei">huawei</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="google pixel">google pixel</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="nokia">nokia</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="le-eco">le-eco</a></li>
          </ul>
          <div class="more-brands">
            <a class="more-brands-btn" href="javascript:void(0);">+ 254 Brands</a>
          </div>
          <div class="manual-brand">
            <input placeholder="Enter your brand if not found above " id="manual-brand-input" class="manual-brand-input ui-autocomplete-input" value="" autocomplete="off" type="text"><span class="icon-shape_4"></span>
          <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul></div>
          <div class="covered hidden">
            <p><span class="icon-tick"></span>Congratulations! Free Pick &amp; Drop service available in your city</p>
            <p><span class="icon-tick"></span>400 Service centers near you</p>
            <p><span class="icon-tick"></span>20% of people bought this near your locality</p>
            <p><span class="icon-tick"></span>3days is average repair time in your area.</p>
          </div>
          <div class="not-covered hidden">
            <p><span class="icon-not-covered-tick"></span>Sorry, we are currently present in India. We don’t cover your City.</p>
            <p>We can briefly state here why we dont cover particular city. Or if at all we are in process of including it.</p>
          </div>
        </div>
      </div>
      <i class="icon-down-arrow-1"></i>
      <i class="icon-orange-cross hidden"></i>
    </div>
  </div>