Question

我在我的网站上使用插件jqTransform。（这个插件是jquery并使表单看起来很好）

有人可以告诉我为什么国家选择表格在选择国家后没有显示国家名称吗？

我已添加指向页面http://www.gamtool.com/affiliates-registration.asp

的链接

这是代码的细分：

<div class="rowElem"><select name="select">
    <option value="opt1" selected>Please select a country</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option></select></div>

这是样式函数的细分：

/* -------------
 * Selects
 * ------------- */
.jqTransformSelectWrapper {
    width: 300px;
    position:relative;
    height: 31px;
    background: url(/js/img/select_left.gif) no-repeat top left;
    float:left;
}

.jqTransformSelectWrapper div span {

    font-size: 12px;
    float: none;
    position: absolute;
    white-space: nowrap;
    height: 31px;
    line-height: 15px;
    padding: 8px 0 0 7px;
    overflow: hidden;
    cursor:pointer;
    width: 300px;
    /*border: 1px solid #CCCCCC;*/
/*  border-right: none;*/
}

JS文件位于：http://www.gamtool.com/js/jquery.jqtransform.js

看起来该国家正在展示，但它上面有一层？

由于

Answer 1

我知道为什么！导致JqueryTransform在隐藏选择中设置您选择的值！因此，为了解决这个难题，您必须使用jqTransformSelectWrapper类破坏您的选择，之后您必须更改select hidden的值并在您的选择中再次应用jqTransform！真的很复杂，但我在这里遇到同样的问题！

Answer 2

解决方案是以不同方式隐藏表单。我使用height:0代替display:none。然后在我的Javascript中，我会使用animate来显示表单。这样jqtransform将正确地设置所有表单元素的样式。

CSS：

#sfBlock03 {
  height:0;
  overflow:hidden;
}

<强> JS

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

注意： #showAdvaced是显示高级选项的按钮的ID，#sfBlock03是包含高级表单的div的ID。

我希望这会有所帮助。

一旦选中，jqTransform下拉菜单就不会显示

2 个答案: