동적 폭 - 사용자 정의 선택 박스

Question

나는 CSS와 jQuery를 등을 사용하여 사용자 정의 선택 상자를 만들 때까지 내가 더 할 ...하지만 생각했다 오늘 밤 ..

코드는 볼 여기로 재생할 수 있습니다 http://jsfiddle.net/nvv35/5/

Firefox, IE 또는 Safari를 사용할 때 선택 상자의 너비가 올바르지 않다는 문제점이 있습니다. Chrome을 사용하여 데모를 보는 경우 아무 문제가 없습니다. jQuery 코드는 "레이블"에 대한 원하는 너비를 설정하고 상자는 거의 완벽하게 보이지만 전에 언급 한 브라우저에서는 보이지 않습니다 ..

선택 레이블이 너무 짧습니다. 드롭 다운에서 가장 긴 아이와 같은 너비를 얻는 대신 텍스트 바로 뒤에서 자릅니다. 문제가있는 곳을 찾을 수 없습니다.

그래서 도움이 필요합니다. 'n 개울.

UPDATE

최종 코드 : http://jsfiddle.net/nvv35/9/

Answer 1

parseInt($(this).next(".selectBox").css("border-width"), 10) NaN인지를 결과한다.

JsFiddle : http://jsfiddle.net/nvv35/8/

다음과 같이 귀하의 코드를 변경

:

** 업데이트 : 국경의 ** 테두리 폭을 얻으려면 제대로 특정 측면 지정된 월 될 필요가있다. (확인 : How to get border width in jQuery/javascript를)

$(document).ready(function() { 
    $("select").css("display", "none"); 
    $(".selectContainer").css("display", "inline-block"); 
    $(".selectHead").each(function() { 
    var newWidth = $(this).next(".selectBox").outerWidth(); 
     var borderWidth = parseInt($(this).next(".selectBox").css("border-left-width").replace(/[^0-9]/g,""), 10) ; 
     if(isNaN(borderWidth)) borderWidth = 0; 
    newWidth = newWidth - (borderWidth * 2); 
    $(this).css("width", newWidth + "px"); 
    }); 
    $(".selectHead").on("click", function() { 
    $(this).next(".selectBox").show(); 
    $(this).closest(".selectContainer").on("mouseleave", function() { 
     $(this).find(".selectBox").hide(); 
    }); 
    }); 
    $("li", ".optionsBox").on("click", function() { 
    var newValue = $(this).attr("id").replace(/(.*)-/,""); 
    $(this).closest(".selectContainer").next("select").val(newValue); 
    $(this).closest(".selectBox").prev(".selectHead").html($(this).html()); 
    $(this).closest(".selectBox").find(".optionSelected").removeClass("optionSelected"); 
    $(this).addClass("optionSelected"); 
    $(this).closest(".selectBox").hide(); 
    }); 
}); 

Answer 2

function customSelect(){ 
$('.custom-select a.open').on('click', function() { 
    if ($(this).next().hasClass('active')) { 
     $(this).next().removeClass('active').slideUp(250); 
    } 
    else{ 
     $(this).next().addClass('active').slideDown(250); 
    } 
}); 

$('.custom-select ul.options li').on('click', function() { 
    var value = $(this).data('value');   
    $(this).parent().removeClass('active').slideUp(250); 
    $(this).parent().parent().prev().attr('value', value); 
    $(this).parent().prev().text(value); 
}); 
} 
customSelect(); 

- 더보기 : http://www.pointmycode.com/customize-select-box-with-css-and-jquery/