デフォルトの選択をドロップダウンして検索を開始させます

Question

ユーザーが検索するためにデータを入力できるいくつかのテキストボックスを持つ検索ページがあります。日付範囲を入力できる日付テキストボックスがあります。フィルタリングする日付フィールドを選択するドロップダウンがあります。

日付範囲のテキストボックスは、デフォルトでは有効になっていません。ドロップダウンで日付フィールドを選択した場合にのみ、日付を入力できます。デフォルトのドロップダウン選択は空白です。

日付フィールドを選択し、ドロップダウンの別の日付フィールドに変更するとすべてが問題ありません。ドロップダウンで日付フィールドを選択し、デフォルトの空白に戻すと、検索がトリガされます。私はこれが起こることを望んでいない。検索ボタンをクリックするだけで検索が行われるようにしたい。

protected void ddlDateType_SelectedIndexChanged(object sender, EventArgs e) 
    { 
     if (ddlDateType.SelectedValue != "") 
     { 
      txtSearchEndDate.Enabled = true; 
      txtSearchStartDate.Enabled = true; 
     } 

     else 
     { 
      txtSearchEndDate.Text = ""; 
      txtSearchStartDate.Text = ""; 
      txtSearchEndDate.Enabled = false; 
      txtSearchStartDate.Enabled = false; 
     } 
    } 

誰かがドロップダウンのデフォルト選択に戻ったときに検索を停止する方法を教えてもらえますか？

---

私はif elseコードをコメントアウトしても同じ結果を得ています。デフォルト以外のものを選択すると検索は開始されず、デフォルトの ""を選択すると検索がトリガされます。

Answer 1

JavaScriptを操作するようにロジックを変更して、ページ全体をポストバックしてコントロールを有効または無効にする必要がない方がよいと思います。

私は、選択されたインデックスが変更されたときにクライアントサイドイベントからトリガーするいくつかのサンプルコードを追加しました。これはonchangeイベントだと思います。このイベントは、コードビハインドで次のように追加できます。

ddlDateType.Attributes.Add（ "onchange"、 "OnDateTypeChanged（）"）;

このコードでは、テキストボックスが無効になっていることを視覚的に示すTextDisabled CSSクラスを含むテキストボックスのクラスも変更されますが、これはオプションです。

function OnDateTypeChanged() { 
    var ddList = document.getElementById("ddlDateType"); 
    var fReadOnly = true; 
    if (ddList.selectedIndex >= 0) 
    { 
     fReadOnly = (ddList.options[ddList.selectedIndex] != ''); 
    } 

    var oTextBox; 

    oTextBox = document.getElementById("txtSearchEndDate"); 
    SetTextboxReadOnly(oTextBox, fReadOnly); 
    if (fReadOnly) { 
     oTextBox.value = ''; 
    } 

    oTextBox = document.getElementById("txtSearchStartDate"); 
    SetTextboxReadOnly(oTextBox, fReadOnly); 
    if (fReadOnly) { 
     oTextBox.value = ''; 
    } 
} 

function SetTextboxReadOnly(oTextBox, fReadOnly) { 
    /// <summary>This method sets or clears the readonly flag on an textbox. It also updates the class information to 
    /// ensure that the control is displayed correctly to the user</summary> 

    if (oTextBox) { 
     oTextBox.readOnly = fReadOnly; 
     oTextBox.className = UpdateClassForReadOnlyChange(fReadOnly, oTextBox.className); 
    } 
} 

function UpdateClassForReadOnlyChange(fReadOnly, sClassName) { 
    /// <summary>This is an internal method used to update a class based on the readonly flag</summary> 

    if (fReadOnly) { 
     return 'TextDisabled ' + sClassName; 
    } else { 
     return sClassName.replace(/TextDisabled /gi, ''); 
    } 
}