0

我有下拉选择 - >选项“id =“select_proptype”，其值在jquery函数中动态生成......我还有其他选择--->选项也是如此，但动态选择位置位于以下输入之上（ html 5) 标记...这种行为仅在 IE 10 和 IE 9 ....

这是我的代码....

<div class="criteria_block">
    <span><label class="search_form_Label" for="proptype">Property Type</label></span>
    <span><select class="inputStyle_class" id="select_proptype" name="type" style="width:165px;"></select></span>
</div>

<div class="criteria_block">
    <span><label class="search_form_Label default_font" for="postcodes">Post Codes</label></span>
    <span><input class="inputStyle_class form_search_textbox" id="postcodes" style="width:160px;" name="postcodes" type="text" /></span>
</div>

在 html 中，我正在调用函数来获取所有值...

     $(document).ready(function () {

          $(this).SearchForm();
     });

jquery 插件功能.......

  $.fn.SearchForm = function () {
       //process the code//
       //generate option values 
     for (var val in plugin_Global_Variables.F_property_Type) {
      $("#select_proptype").append('<option value="' + plugin_Global_Variables.F_property_Type[val] + '">' + plugin_Global_Variables.F_property_Type[val] + '</option>');
  }
}

CSS----------------

   .criteria_block {
        display:block;
        width:300px;
        height:40px;
        margin-top:10px;
        color:#4E4E4E;
        border:thin;
        border-color:grey;
    }

    .search_form_Label {
        display:inline-block;
        width:100px;
        font-weight:500;
        margin-left:10px;
        line-height:40px;
   }
4

2 回答 2

1

您.append()用于添加内容 - 这会将您编写的代码添加到<select>元素的开头。

您正在寻找的是通过像这样替换整个 html 来替换整个项目集：

$("#select_proptype").html('<option value="' + plugin_Global_Variables.F_property_Type[val] + '">' + plugin_Global_Variables.F_property_Type[val] + '</option>');

或者可能一直只替换一个选项，在这种情况下，您需要以某种方式识别它（或者像这样有一个 ID：）

$("#select_proptype").append('<option id="dynamicoption" value="' + plugin_Global_Variables.F_property_Type[val] + '">' + plugin_Global_Variables.F_property_Type[val] + '</option>');

然后每次都替换它：

$('#dynamicoption').remove();
$('#select_proptype').append('...');

或者如果您知道它始终是列表中的第一个，则只需像这样替换它：

$('#select_proptype option:first').remove();
$('#select_proptype').append('...');
于 2013-06-16T12:50:32.257 回答
0

.search_form_Label 的 CSS 中的宽度设置为 100px 你在哪里标注

 <span><label class="search_form_Label" for="proptype">Property Type</label></span>

需要更多宽度才能在一行中显示“属性类型”，这就是您选择选项位于以下输入标签上的原因...

将宽度更改为 100px+ 以适应框架....

 .search_form_Label {
    display:inline-block;
    width:100px;             // change width here to 100px +
    font-weight:500;
    margin-left:10px;
    line-height:40px;
  }
于 2013-06-16T13:20:41.390 回答