복붙노트

[JQUERY] jQuery를 사용하여 첫 번째 선택 목록 옵션에 따라 두 번째 선택 목록을 변경하려면

JQUERY

jQuery를 사용하여 첫 번째 선택 목록 옵션에 따라 두 번째 선택 목록을 변경하려면

해결법

  1. 1.$ ( "#의 선택 1"). 변화 (함수 () { 경우 ($ (이) .DATA ( '옵션') === 정의되지 않은) { / * * /를 선택 1에 매립 종류 모든 옵션 -2-의 배열을 취하고 $ (이) .DATA ( '옵션', $ ( '#의 선택 2 옵션') 클론 ().); } var에 ID가 $를 = (이)) (.val; VAR 옵션 = $ (이) .DATA ( '옵션') 필터 ( '[VALUE ='+ ID + '].'); $ ( '#의 선택 2') HTML (옵션).; }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> <선택 이름 = "선택 1"ID = "선택 1"> <옵션 값 = "1"> 과일 <옵션 값 = "2"> 동물 <옵션 값 = "3"> 새 <옵션 값 = "4"> 자동차 <선택 이름 = "선택 2"ID = "선택 2"> <옵션 값 = "1"> 바나나 <옵션 값 = "1"> 애플 <옵션 값 = "1"> 오렌지 <옵션 값 = "2"> 늑대 <옵션 값 = "2"> 폭스 <옵션 값 = "2"> 베어 <옵션 값 = "3"> 이글 <옵션 값 = "3"> 호크 <옵션 값 = "4"> BWM <선택>

    $ ( "#의 선택 1"). 변화 (함수 () { 경우 ($ (이) .DATA ( '옵션') === 정의되지 않은) { / * * /를 선택 1에 매립 종류 모든 옵션 -2-의 배열을 취하고 $ (이) .DATA ( '옵션', $ ( '#의 선택 2 옵션') 클론 ().); } var에 ID가 $를 = (이)) (.val; VAR 옵션 = $ (이) .DATA ( '옵션') 필터 ( '[VALUE ='+ ID + '].'); $ ( '#의 선택 2') HTML (옵션).; }); <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> <선택 이름 = "선택 1"ID = "선택 1"> <옵션 값 = "1"> 과일 <옵션 값 = "2"> 동물 <옵션 값 = "3"> 새 <옵션 값 = "4"> 자동차 <선택 이름 = "선택 2"ID = "선택 2"> <옵션 값 = "1"> 바나나 <옵션 값 = "1"> 애플 <옵션 값 = "1"> 오렌지 <옵션 값 = "2"> 늑대 <옵션 값 = "2"> 폭스 <옵션 값 = "2"> 베어 <옵션 값 = "3"> 이글 <옵션 값 = "3"> 호크 <옵션 값 = "4"> BWM <선택>

    데이터를 저장하는 데이터의 jQuery ()을 사용하여

  2. 2.나는 별도의 JSON 파일에서 $ .getJSON ()를 사용하여이 버전을 만들고 싶었다.

    나는 별도의 JSON 파일에서 $ .getJSON ()를 사용하여이 버전을 만들고 싶었다.

    데모 : 여기

    자바 스크립트 :

    $(document).ready(function () {
    "use strict";

    var selectData, $states;

    function updateSelects() {
        var cities = $.map(selectData[this.value], function (city) {
            return $("<option />").text(city);
        });
        $("#city_names").empty().append(cities);
    }

    $.getJSON("updateSelect.json", function (data) {
        var state;
        selectData = data;
        $states = $("#us_states").on("change", updateSelects);
        for (state in selectData) {
            $("<option />").text(state).appendTo($states);
        }
        $states.change();
    });
});

    HTML :

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <select id="us_states"></select>
    <select id="city_names"></select>
    <script type="text/javascript" src="updateSelect.js"></script>
</body>
</html>

    JSON :

    {
    "NE": [
        "Smallville",
        "Bigville"
    ],
    "CA": [
        "Sunnyvale",
        "Druryburg",
        "Vickslake"
    ],
    "MI": [
        "Lakeside",
        "Fireside",
        "Chatsville"
    ]
}

  3. 3.#의 선택 1에서 선택한 옵션의 값에 따라 변수에 필터를 모든 #의 선택 2의 옵션을 저장하고, #의 선택 2에서 .html 중에서 ()를 사용하여 설정 :

    #의 선택 1에서 선택한 옵션의 값에 따라 변수에 필터를 모든 #의 선택 2의 옵션을 저장하고, #의 선택 2에서 .html 중에서 ()를 사용하여 설정 :

    var $select1 = $( '#select1' ),
    $select2 = $( '#select2' ),
    $options = $select2.find( 'option' );

$select1.on('change', function() {
    $select2.html($options.filter('[value="' + this.value + '"]'));
}).trigger('change');

  4. 4.나는 sabithpocker의 아이디어를 내장하고 주어진 트리거에서 하나 개 이상의 선택 박스를 제어 할 수있는 더 일반화 된 버전을했다.

    나는 sabithpocker의 아이디어를 내장하고 주어진 트리거에서 하나 개 이상의 선택 박스를 제어 할 수있는 더 일반화 된 버전을했다.

    나는 "전환"나는 클래스 이름을 제어 할 원하는 selectboxes을 할당하고 같이 그들 모두를 복제 :

    $j(this).data('options',$j('select.switchable option').clone());

    또한 클래스로 변환 할 수있는 전환 선택에 대한 명명 규칙을 특정을 사용했다. 내 경우에는, "카테고리"와 "발행 회사"는 선택 이름, "category_2"와 "issuer_1"클래스 이름이었다.

    그럼 난 함수 내에서 사용하기위한 $ (이)의 사본을 제작 한 후, select.switchable 그룹에 $의 .each를 실행 :

    var that = this;
$j("select.switchable").each(function() { 
    var thisname = $j(this).attr('name');
    var theseoptions = $j(that).data('options').filter( '.' + thisname + '_' + id );
    $j(this).html(theseoptions);
});

    당신이 제어 할 것들에 클래스 명을 사용하여 기능 안전 (예 : 바이올린의 예에서 마지막으로) 다른 페이지의 다른 선택을 무시합니다.

    여기에 전체 코드와 바이올린입니다 :

  5. 5.이 모든 방법은 중대하다. 내가 AJAX와 "onchange를"을 사용하여 동적 양식을 작성하는 좋은 예입니다 또 다른 간단한 자원을 발견했다.

    이 모든 방법은 중대하다. 내가 AJAX와 "onchange를"을 사용하여 동적 양식을 작성하는 좋은 예입니다 또 다른 간단한 자원을 발견했다.

    http://www.w3schools.com/php/php_ajax_database.asp

    나는 단순히 첫 번째 드롭 다운의 선택에 따라 채워 꽃밥 선택 드롭 다운에 텍스트 테이블 출력을 수정했습니다. 내 응용 프로그램의 사용자는 다음 두 번째 드롭 다운 선택한 상태의 도시로 채워집니다 상태를 선택합니다. 이상하지만, PHP와 MySQL과 JSON의 예와 같이 대부분.

  6. 6.나는 완벽하게 나를 위해 일하는 ... followiing과 해결책을 발견했다 :)

    나는 완벽하게 나를 위해 일하는 ... followiing과 해결책을 발견했다 :)

    $(document).ready(function(){
$("#selectbox1").change(function() {
    var id = $(this).val();
    $("#selectbox2").val(id);
 });   });

  7. 7.그것을 사용하려고 :

    그것을 사용하려고 :

    드롭 다운 다른 드롭 다운 상자에서 선택한 옵션에 따라 상자. 사용 jQuery를 첫 번째 선택 목록 옵션에 따라 두 번째 선택 목록을 변경합니다.

    <asp:HiddenField ID="hdfServiceId" ClientIDMode="Static" runat="server" Value="0" />
<asp:TextBox ID="txtOfferId" CssClass="hidden" ClientIDMode="Static" runat="server" Text="0" />
<asp:HiddenField ID="SelectedhdfServiceId" ClientIDMode="Static" runat="server" Value="0" />
<asp:HiddenField ID="SelectedhdfOfferId" ClientIDMode="Static" runat="server" Value="0" />

<div class="col-lg-2 col-md-2 col-sm-12">
    <span>Service</span>
    <asp:DropDownList ID="ddlService" ClientIDMode="Static" runat="server" CssClass="form-control">
    </asp:DropDownList>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
    <span>Offer</span>
    <asp:DropDownList ID="ddlOffer" ClientIDMode="Static" runat="server" CssClass="form-control">
    </asp:DropDownList>
</div>

    웹 페이지에 jQuery 라이브러리를 사용합니다.

    <script type="text/javascript">
    $(document).ready(function () {
        ucBindOfferByService();
        $("#ddlOffer").val($('#txtOfferId').val());
    });

    $('#ddlOffer').on('change', function () {
        $("#txtOfferId").val($('#ddlOffer').val());
    });

    $('#ddlService').on('change', function () {
        $("#SelectedhdfOfferId").val("0");
        SetServiceIds();
        var SelectedServiceId = $('#ddlService').val();
        $("#SelectedhdfServiceId").val(SelectedServiceId);
        if (SelectedServiceId == '0') {
        }
        ucBindOfferByService();
        SetOfferIds();
    });

    function ucBindOfferByService() {
        GetVendorOffer();
        var SelectedServiceId = $('#ddlService').val();
        if (SelectedServiceId == '0') {
            $("#ddlOffer").empty();
            $("#ddlOffer").append($("<option></option>").val("0").html("All"));
        }
        else {
            $("#ddlOffer").empty();
            $(document.ucVendorServiceList).each(function () {
                if ($("#ddlOffer").html().length == "0") {
                    $("#ddlOffer").append($("<option></option>").val("0").html("All"));
                }
                $("#ddlOffer").append($("<option></option>").val(this.OfferId).html(this.OfferName));
            });
        }
    }

    function GetVendorOffer() {
        var param = JSON.stringify({ UserId: $('#hdfUserId').val(), ServiceId: $('#ddlService').val() });
        AjaxCall("DemoPage.aspx", "GetOfferList", param, OnGetOfferList, AjaxCallError);
    }

    function OnGetOfferList(response) {
        if (response.d.length > 0)
            document.ucVendorServiceList = JSON.parse(response.d);
    }

    function SetServiceIds() {
        var SelectedServiceId = $('#ddlService').val();
        var ServiceIdCSV = ',';
        if (SelectedServiceId == '0') {
            $('#ddlService > option').each(function () {

                ServiceIdCSV += $(this).val() + ',';
            });
        }
        else {
            ServiceIdCSV += SelectedServiceId + ',';
        }
        $("#hdfServiceId").val(ServiceIdCSV);
    }

    function SetOfferIds() {
        var SelectedServiceId = $('#ddlService').val();
        var OfferIdCSV = ',';
        if (SelectedServiceId == '0') {
            $(document.ucVendorServiceList).each(function () {
                OfferIdCSV += this.OfferId + ',';
            });
        }
        else {
            var SelectedOfferId = $('#ddlOffer').val();
            if (SelectedOfferId == "0") {
                $('#ddlOffer > option').each(function () {
                    OfferIdCSV += $(this).val() + ',';
                });
            }
            else {
                OfferIdCSV += SelectedOfferId + ',';
            }
        }
    }
</script>

    웹 페이지에서 백엔드 코드를 사용합니다.

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        ServiceList();
    }
}

public void ServiceList()
{
    ManageReport manageReport = new ManageReport();
    DataTable ServiceList = new DataTable();
    ServiceList = manageReport.GetServiceList();
    ddlService.DataSource = ServiceList;
    ddlService.DataTextField = "serviceName";
    ddlService.DataValueField = "serviceId";
    ddlService.DataBind();
    ddlService.Items.Insert(0, new ListItem("All", "0"));
}

public DataTable GetServiceList()
{
    SqlParameter[] PM = new SqlParameter[]
    {
        new SqlParameter("@Mode"    ,"Mode_Name"    ),
        new SqlParameter("@UserID"  ,UserId         )
    };
    return SqlHelper.ExecuteDataset(new SqlConnection(SqlHelper.GetConnectionString()), CommandType.StoredProcedure, "Sp_Name", PM).Tables[0];
}

[WebMethod]
public static String GetOfferList(int UserId, String ServiceId)
{
    var sOfferList = "";
    try
    {
        CommonUtility utility = new CommonUtility();
        ManageReport manageReport = new ManageReport();
        manageReport.UserId = UserId;
        manageReport.ServiceId = ServiceId;
        DataSet dsOfferList = manageReport.GetOfferList();
        if (utility.ValidateDataSet(dsOfferList))
        {
            //DataRow dr = dsEmployerUserDepartment.Tables[0].NewRow();
            //dr[0] = "0";
            // dr[1] = "All";
            //dsEmployerUserDepartment.Tables[0].Rows.InsertAt(dr, 0);
            sOfferList = utility.ConvertToJSON(dsOfferList.Tables[0]);
        }
        return sOfferList;
    }
    catch (Exception ex)
    {
        return "Error Message: " + ex.Message;
    }
}

public DataSet GetOfferList()
{
    SqlParameter[] sqlParameter = new SqlParameter[]
        {                                                                     
            new SqlParameter("@Mode"        ,"Mode_Name"    ),
            new SqlParameter("@UserID"      ,UserId         ),
            new SqlParameter("@ServiceId"   ,ServiceId      )
        };
    return SqlHelper.ExecuteDataset(new SqlConnection(SqlHelper.GetConnectionString()), CommandType.StoredProcedure, "Sp_Name", sqlParameter);
}

  8. 8.선택한 답변에 나는 페이지가로드 될 때 초기에 첫 번째 옵션의 선택 이전에 고정되어 있음을 볼 수 있으므로 선택 2의 범주 모든 옵션을 제공합니다. 당신은 먼저 select 태그에 모두 다음과 같은 옵션을 추가하여이를 방지 할 수 있습니다 : - 옵션을 선택 <숨겨진 장애인 선택한 옵션 값 = "없음">

    선택한 답변에 나는 페이지가로드 될 때 초기에 첫 번째 옵션의 선택 이전에 고정되어 있음을 볼 수 있으므로 선택 2의 범주 모든 옵션을 제공합니다. 당신은 먼저 select 태그에 모두 다음과 같은 옵션을 추가하여이를 방지 할 수 있습니다 : - 옵션을 선택 <숨겨진 장애인 선택한 옵션 값 = "없음"> 

    <select name="select1" id="select1">
<option value="none" selected disabled hidden>Select an Option</option>
<option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>


<select name="select2" id="select2">
<option value="none" selected disabled hidden>Select an Option</option>
  <option value="1">Banana</option>
  <option value="1">Apple</option>
  <option value="1">Orange</option>
  <option value="2">Wolf</option>
  <option value="2">Fox</option>
  <option value="2">Bear</option>
  <option value="3">Eagle</option>
  <option value="3">Hawk</option>
  <option value="4">BWM<option>
</select>

    9. from https://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 바이너리 문자열에서 빌드 PDF 파일에 자바 스크립트를 사용하여 웹 서비스에서 반환  (0) 2020.10.05
[JQUERY] 자바 스크립트 객체의 필터 어레이  (0) 2020.10.05
[JQUERY] jQuery를 객체 평등  (0) 2020.10.05
[JQUERY] 어떻게을 가진 요소를 선택 jQuery를받을 수 있나요. 자신의 ID에서 (기간)?  (0) 2020.10.05
[JQUERY] 토글 쇼 / 버튼 숨기기 DIV?  (0) 2020.10.05
,

티스토리툴바