0

我正在使用 JSF-primeface 和 javascript。

这是javascript的代码。

<script>
var $element = $("select['se:type5'] option:selected").val();

alert($element);

var input = document.getElementById('se:search');
var combo = document.getElementById('se:type1');

if($element == 1)
{
    input.disabled = false; 
    combo.disabled = true;
}
else if($element == 2)
{
    input.disabled = true; 
    combo.disabled = false;
}
</script>

我可以使用上面的代码禁用输入框，但 onemenu 不受影响。

这是我的 JSF 代码

      <p:selectOneMenu id="type5"  effect="fold" onchange="disabled();" 
                               required="true" 
                               label="Type5"  styleClass="select-option" style="border:1px solid #b5b5b5; padding-left:5px; margin-top:5px;width:298px;height:25px;" >

        <f:selectItem itemLabel="Search By Skill" itemValue="1" />  
        <f:selectItem itemLabel="Search By Location" itemValue="2" />  



              </p:selectOneMenu> 
       <p:inputText value="#{user.latitude}" id="latitude" style="visibility: hidden" />
  <h:panelGrid columns="4">







      <p:inputText id="search" styleClass="inner-page-input-type"

         onfocus="if(this.value=='Job title, Skills, Company, etc.') this.value='';" 
 onblur="if(this.value=='') this.value='Job title, Skills, Company, etc.';" type="text"  
 value="#{user.skill}"   >  

        </p:inputText>  


      <p:selectOneMenu id="type1" value="#{user.geoLocationLatitude}" effect="fold" 
                               required="true" 
                               label="Type1"  styleClass="select-option" style="border:1px solid #b5b5b5; padding-left:5px; margin-top:5px;width:298px;height:25px;" >

        <f:selectItem itemLabel="---km---" itemValue="1" />  
        <f:selectItem itemLabel="Under 150km" itemValue="150" />  
        <f:selectItem itemLabel="Between 150km - 300km" itemValue="300" />  
        <f:selectItem itemLabel="Between 300km - 450km" itemValue="450" />  
        <f:selectItem itemLabel="Between 450km - 600km" itemValue="599" /> 
        <f:selectItem itemLabel="Above 600km" itemValue="600" /> 

              </p:selectOneMenu>  


 </h:form>
4

2 回答 2

5

JavaScript对 JSF 代码一无所知。相反，它知道有关其生成的 HTML 输出的所有信息。在浏览器中通过右键单击页面查看生成的 HTML 输出并查看源代码。如果仔细观察，您会发现<p:selectOneMenu>不会生成 a <select><option>，而是生成<div><ul><li>. 该disabled属性仅在 上受支持<select>。因此，您看不到任何效果。

我建议您通过 JSF ajax 而不是通过 JavaScript 禁用该功能。只需在下拉列表中添加<f:ajax>or<p:ajax>并指定需要更新的组件的 ID，其中disabled根据当前选定的项目进行检查。不再需要 JavaScript 样板。这样，您还将利用服务器端验证的稳健性。

<p:selectOneMenu binding="#{searchType}" ...>
    <f:selectItem itemLabel="Search By Skill" itemValue="1" />  
    <f:selectItem itemLabel="Search By Location" itemValue="2" />  
    <p:ajax update="search type1" />
</p:selectOneMenu> 

<p:inputText id="search" ... disabled="#{searchType.value == 2}" />  

<p:selectOneMenu id="type1" ... disabled="#{searchType.value == 1}">
    ...
</p:selectOneMenu>

顺便说一句，变量名“combo”是错误的。这是一个下拉菜单，而不是组合框。组合框是可编辑的下拉菜单。<p:selectOneMenu>不会呈现可编辑的下拉列表，而只是一个下拉列表。

于 2012-06-01T12:16:15.343 回答
-1

Going on what you said, try this instead:

var input = document.getElementById('search');
var combo = document.getElementById('type1');
于 2012-06-01T19:16:07.160 回答