刷新后选择保留下拉列表

时间:2017-08-11 04:18:31

标签: javascript jquery

我尝试在更改值

触发重新加载后继续保留所选项目

但我在控制台上遇到此错误" TypeError:o.nodeName未定义[了解详情]"

我的选择:

<select onchange="showMov(this.value);" id="mov_type" name="mov_type" class="form-control" type="text"  />
   <option value="Selected">Choose Type</option>
   <option value="rusak">Rusak</option>
   <option value="dipinjam">Dipinjam</option>
   <option value="ditarik">Ditarik</option>
</select>

我的js

function showMov(val){

var selectedItem = sessionStorage.getItem("SelectedItem");  
alert(selectedItem);

    if(selectedItem){
          var dropVal = $(this).val();
           sessionStorage.setItem("SelectedItem", dropVal);
    }

    if (val=="dipinjam"){
        $('#tarik_form').hide();
        $('#rusak_form').hide();
        $('#pinjam_form').show();
        $('#moveform').attr('action','asetpindah.php');
    }else if (val=="ditarik"){
        $('#pinjam_form').hide();
        $('#rusak_form').hide();
        $('#tarik_form').show();
        $('#moveform').attr('action','asettarik.php');
    }else if(val=="rusak"){
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').show();
        $('#moveform').attr('action','asetrusak.php');
    }else{
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').hide();
    }
}

2 个答案:

答案 0 :(得分:1)

循环并比较值以设置选择属性:

$('select#id option').each(function() {
    if ($(this).val() == dropVal) {
         $(this).attr('selected', true);
    }
});

或者

$("select#id option[value="+dropVal+"]").attr('selected', true);

答案 1 :(得分:1)

在您的代码中,selectedItem始终为null,因为您正在将所选值设置为if块中的sessionStorage。删除if块,然后立即将所选选项设置为sessionStorage:

function showMov(val) {
  sessionStorage.setItem('SelectedItem', val);

  switch (val) {
    case 'dipinjam':
      {
        $('#tarik_form').hide();
        $('#rusak_form').hide();
        $('#pinjam_form').show();
        $('#moveform').attr('action', 'asetpindah.php');
        break;
      }
    case 'ditarik':
      {
        $('#pinjam_form').hide();
        $('#rusak_form').hide();
        $('#tarik_form').show();
        $('#moveform').attr('action', 'asettarik.php');
        break;
      }
    case 'rusak':
      {
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').show();
        $('#moveform').attr('action', 'asetrusak.php');
        break;
      }
    default:
      {
        $('#pinjam_form').hide();
        $('#tarik_form').hide();
        $('#rusak_form').hide();
      }
  }
}

此外,当DOM准备就绪时,您应该检查sessionStorage是否有SelectedItem

$(function() {
  var selMovType = document.getElementById('mov_type');
  var selectedItem = sessionStorage.getItem('SelectedItem');

  if (selectedItem) {
    selMovType.value = selectedItem;
  }
});

这是jsfiddle