在ie10,9中选择选项(html 5标签)在下一个输入(html 5标签)的位置

select option (html 5 tag) position over next input (html 5 tag) in IE 10, 9

本文关键字：html 标签 下一个 输入 位置 ie10 选择 选项      更新时间：2023-09-26

我已经下拉选择->选项"id="select_proptype"的值是动态生成的jquery函数…我也有其他的选择->选项，但动态选择位置出现在以下输入(html 5)标签的顶部…此行为仅在ie10和ie9中存在....

这是我的代码....

<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;
   }

您正在使用.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('...');

你的。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;
  }
相关文章：