dongzaizai2015 2017-07-03 12:42
浏览 10
已采纳

Php：动态更改列表值而不加载页面

I have three list in my form where having same option while loading the form.

But my requirement is : as soon as user selects the first option it should be removed from second list and as user gives second option it should be removed from third list. So there are no chances to have duplicate choice.

<html>
<head>
<script language="JavaScript">
function enable_text(status)
{
status=!status; 
    document.f1.other_text.disabled = status;
}
</script>
</head>
<body onload=enable_text(false);>

<form name=f1 method=post>
    <label>First Pref :  </label>
    <select name="Colors option 1">
    <option value="">Select 1st</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="B">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
    <option value="">Select 2nd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="B">Yellow</option>
</select>
</br></br>
<label>Third Pref :  </label>
<select name="Colors option 3">
    <option value="">Select 3rd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="B">Yellow</option>
</select>

  • 写回答

1条回答 默认 最新

  • dousonghs58612 2017-07-03 13:16
    关注

    Here's jQuery event change on select boxes, which will disable selected option in other selects but not in selected one.

    var selected = $(this).val();
$('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);

    And after that will restart options that are disabled but not selected.

    --I've also seted value "Y" for yellow.

    $(function(){
  $('select').on('change', function(){
      
      var selected = $(this).val();
      $('select').not(this).find('option[value="'+selected+'"]').prop('disabled', true);
      
      // restart options that are disabled, but not selected anymore.
      var selectedElements = "";
      $('select option:selected').each(function(k,v){ 
          selectedElements += (selectedElements!=""?",":"")+ '[value="'+$(this).val()+'"]'; 
       });
      $('select option:disabled').not(selectedElements).prop('disabled', false);
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<form name=f1 method=post>
    <label>First Pref :  </label>
    <select name="Colors option 1">
    <option value="">Select 1st</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
</select>
</br></br>
<label>Second Pref : </label>
<select name="Colors option 2">
    <option value="">Select 2nd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
</select>
</br></br>
<label>Third Pref :  </label>
<select name="Colors option 3">
    <option value="">Select 3rd</option>
    <option value="R">Red</option>
    <option value="G">Green</option>
    <option value="B">Blue</option>
    <option value="Y">Yellow</option>
</select>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#java#的问题：找一份能快速看完mooc视频的代码
  • ¥15 这种微信登录授权 谁可以做啊
  • ¥15 请问我该如何添加自己的数据去运行蚁群算法代码
  • ¥20 用HslCommunication 连接欧姆龙 plc有时会连接失败。报异常为“未知错误”
  • ¥15 网络设备配置与管理这个该怎么弄
  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！