Question

在页面init上的

我有以下组合框元素的渲染

<div class="combobox-container">
    <input type="hidden" name="MySelection" value="">
    <div class="input-group">
       <input class="combobox form-control" type="text" autocomplete="off" placeholder="Select">
    <ul class="typeahead typeahead-long dropdown-menu">
       <li class="" data-value="val1">
       <li class="active" data-value="val2">
       <li data-value="val3">
       <li data-value="val4">
       <li data-value="val5">
    </ul>
    <span class="input-group-addon dropdown-toggle" data-dropdown="dropdown">
       <span class="caret"></span>
       <span class="glyphicon glyphicon-remove"></span>
    </span>
    </div>
</div>

呈现类似

的组合

在我从这个组合中选择选项后，我正在进行渲染，如

现在某些用户操作后我正在重置其默认状态的组合框，所以我使用以下代码

$('#MySelection').val(undefined);

这实际上改变了价值，正如我所料，但ui elemenent保持完整，它出现了而我想表现为

我试过$('#MySelection').data('combobox').refresh(); 但这没有帮助。

更新有人建议我尝试移动$('#MySelection').data('combobox').refresh(); 在文件的最后，因为我在firebug中遇到错误

TypeError：$（...）。data（...）未定义'）。data（'combobox'）。refresh（）;

但它没有帮助。我甚至尝试在所有jquery init文件之后添加_Layout.cshtml文件，但也没有任何进展。

Answer 1

更新：试试这个：

自举-组合框：

$('#MySelection').val('');
$('#MySelection').data('combobox','refresh');

   $(document).ready(function(){
          $('.combobox').combobox()

          $("#reset").on("click",function(){
        	  $('.combobox').val('');
        	  $('.combobox').data('combobox','refresh');
          });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="http://formvalidation.io/vendor/bootstrap-combobox/js/bootstrap-combobox.js" type="text/javascript"></script>

    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
  
   <link href="http://formvalidation.io/vendor/bootstrap-combobox/css/bootstrap-combobox.css" media="screen" rel="stylesheet" type="text/css">
   </head>
  <body>

        <h1>Vertical Form</h1>

          <div class="form-group">
            <label>Turns this</label>
            <select class="combobox input-large form-control">
              <option value="">Select a State</option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              
            </select>
          </div>
     
        <button id="reset">Reset</button>

Answer 2

使用以下代码设置所选索引0

$('#MySelection').prop('selectedindex',0);

Answer 3

您的元素<input type="hidden" name="MySelection" value="">的名称为MySelection。

使用$('#MySelection').val(undefined);你试图通过它的ID（不是名字）来调用它。

请尝试$('input[name=MySelection]')。

Answer 4

这对我有用：

$('#MySelection').val('');
$('#MySelection').data("combobox").clearElement();
$('#MySelection').data('combobox').refresh();

Answer 5

经过多次搜索，我发现 @mikeblum's solution 适合我。

$('#element').data('combobox').clearTarget();
$('#element').data('combobox').clearElement();

组合框不会刷新价值变化

5 个答案: