从下拉列表中选择项目后,如何使自动填充字段为空白

时间:2013-12-18 05:06:07

标签: javascript jquery

这是我的代码:

    var availableTags = ["Afghanistan","Albania","Algeria","Andorra","Angola","Antigua and  Barbuda","Argentina","Armenia","Australia","Austria","Azerbaijan","Bahrain","Bangladesh","Barbados","Belarus","Belize","Benin","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Brazil","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Central African Republic","Chad","Chile","China","Columbia","Comoros","Congo","Costa Rica","Croatia","Cuba","Cyprus","Czech Republic","Czechoslovakia","Dem. Rep. of Congo","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Finland","Finland","France","France","Gabon","Gambia, The","Georgia","Germany","Ghana","Greece","Grenada","Guadeloupe (Fr.)","Guam","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Honduras","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isreal","Italy","Ivory Coast","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Korea, North","Korea, South","Kuwait","Kyryzstan","Laos","Latvia","Lebanon","Leichtenstein","Lesotho","Liberia","Libya","Lithuania","Luxembourg","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Martinique (Fr.)","Mauritania","Maurtitus","Mexico","Moldova","Monaco","Mongolia","Morocco","Mozambique","Myanmar (Burma)","Namibia","Nepal","Netherlands","New Zealand","Nicaragua","Niger","Norway","Oman","Pakistan","Panama","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Romania","Russia","Rwanda","San Marino","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia and Montenegro","Seychelles","Sierra Leone","Singapore","Slovakia","Solvenia","Somalia","South Africa","South Korea","Spain","Sri Lanka","St. Kitts-Nevis","St. Lucia","St. Vincent and the Grenadines","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Tajikistan","Tanzania","Tasmania","Thailand","Timor, East","Togo","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Uganda","Ukraine","United Kingdom","Unites Arab Emirates","Uruguay","USA","Uzbekistan","Vatican City","Venezuela","Vietnam","Virgin Islands (U.K.)","Virgin Islands (U.S.)","Yemen","Zambia","Zimbabwe"];
    var country;
    $( "#country_name" ).autocomplete({
      source: availableTags,
      autoFocus: true,
      select: function( event, ui ) {              
           country=ui.item.value;
           $('#div_selected_country').text($('#div_selected_country').html()+"\n"+country);
           $('#hid_country_names').val($('#div_selected_country').html());
           //$('#country_name').val()="";//doesn't become blank.
      }
    });

  });

这是我的html文件

<input name="hid_country_names" id="hid_country_names" type="hidden">
<div id="div_selected_country" style="float:left; width:25%">

当我开始写国家名称时,它会在下拉菜单中显示我匹配的国家/地区列表。选择国家后,它出现在文本框中。但我希望国家名称应该出现在我的div_selected_country中(工作正常)并将文本框country_name设为空白。

3 个答案:

答案 0 :(得分:1)

在没有参数的输入字段上调用val()方法会返回该值。你的陈述

$('#country_name').val()="";

与说

相同
some_string = "";

您想在参数

中将其设置为空字符串
$('#country_name').val(''); 

该事件可能会再次进行设置。这应该可以解决问题

$( "#country_name" ).autocomplete({
  source: availableTags,
  autoFocus: true,
  select: function( event, ui ) {              
       country=ui.item.value;
       $('#div_selected_country').text($('#div_selected_country').html()+"\n"+country);
       $('#hid_country_names').val($('#div_selected_country').html());
       $(this).val('');
       return false;
  }
});

使用$(this)作为上下文是ui元素。从该方法返回false应该会阻止自动完成再次设置。

这个答案表明了同样的原因并解释了原因:Clear form field after select for jQuery UI Autocomplete你应该只是对这个答案进行投票。

答案 1 :(得分:0)

正如你写下面的一行

$('#hid_country_names').val($('#div_selected_country').html());

你应该知道它应该是

$('#country_name').val('');

或尝试

  $('#country_name').text('');

答案 2 :(得分:0)

    select: function (event, ui) {
        event.preventDefault();
        country=ui.item.value;
        $('#div_selected_country').text($('#div_selected_country').html()+"\n"+country);
        $('#hid_country_names').val($('#div_selected_country').html());
        if ( ui.item ){
          $('#country_name').attr('value', '');

        }
    }