선택을 통한 Onchange 오픈 URL-jQuery

Program Club

선택을 통한 Onchange 오픈 URL-jQuery

proclub 2020. 10. 27. 23:43

선택을 통한 Onchange 오픈 URL-jQuery

URL 선택 옵션을 변경할 때 이벤트를 첨부하는 가장 좋은 방법은 무엇입니까? href를 attr에 저장하고 변경시 가져 오시겠습니까?

매우 간단합니다. 작동하는 예를 살펴 보겠습니다.

<select id="dynamic_select">
  <option value="" selected>Pick a Website</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.youtube.com">YouTube</option>
  <option value="https://www.gurustop.net">GuruStop.NET</option>
</select>

<script>
    $(function(){
      // bind change event to select
      $('#dynamic_select').on('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

$(function() {
  // bind change event to select
  $('#dynamic_select').on('change', function() {
    var url = $(this).val(); // get selected value
    if (url) { // require a URL
      window.location = url; // redirect
    }
    return false;
  });
});

<select id="dynamic_select">
  <option value="" selected>Pick a Website</option>
  <option value="http://www.google.com">Google</option>
  <option value="http://www.youtube.com">YouTube</option>
  <option value="https://www.gurustop.net">GuruStop.NET</option>
</select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
        ></script>

비고 :

질문 은 이미 jQuery를 지정합니다 . 그래서 나는 이것에서 다른 대안을 유지하고 있습니다.
jQuery를 이전 버전에서 (<1.7), 당신은 대체 할 수 있습니다 on로 bind.
이것은 Meligy의 Web Developers Newsletter의 JavaScript 팁에서 발췌 되었습니다 .

이것이 가장 간단한 방법이라고 생각합니다.

<select onchange="if (this.value) window.location.href=this.value">
    <option value="">Pick one:</option>
    <option value="/foo">Foo</option>
    <option value="/bar">Bar</option>
</select>

죄송합니다. 여기에는 많은 코딩이 있습니다.

가장 간단한 것을 무료로드립니다. 나는 그것을 2005 년에 다시 발명했지만, 자바 스크립트 소스는 이제 그것을 생각 해낸 것이 직원들이라고 말하고있다 – 1 년 이상 후에!

어쨌든 여기에 자바 스크립트가 없습니다 !!!

<!-- Paste this code into the BODY section of your HTML document  -->
<select size="1" name="jumpit" onchange="document.location.href=this.value"> 
<option selected value="">Make a Selection</option>
<option value="http://www.javascriptsource.com/">The JavaScript Source</option>
<option value="http://www.javascript.com">JavaScript.com</option>
<option value="http://www.webdeveloper.com/forum/forumdisplay.php?f=3">JavaScript Forums</option>
<option value="http://www.scriptsearch.com/">Script Search</option>
<option value="http://www.webreference.com/programming/javascript/diaries/">The JavaScript Diaries</option>
</select>

원하는 URL이나 상대 URL (서버의 페이지 위치)을 입력하기 만하면 항상 작동합니다.

jQuery를 사용하는이 간단한 코드 조각을 사용하여 드롭 다운 메뉴에서 리디렉션 할 수 있습니다.

<select id="dynamic-select">
    <option value="" selected>Pick a Website</option>
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.youtube.com/">YouTube</option>
    <option value="http://www.stackoverflow.com/">Stack Overflow</option>
</select>

<script>
    $('#dynamic-select').bind('change', function () { // bind change event to select
        var url = $(this).val(); // get selected value
        if (url != '') { // require a URL
            window.location = url; // redirect
        }
        return false;
    });
</script>

JS 바이올린 예

$('#userNav').change(function() {
window.location = $(':selected',this).attr('href')
});




<select id="userNav">
<option></option>
<option href="http://google.com">Goolge</option>
<option href="http://duckduckgo.com">Go Go duck</option>
</select>

이것은 선택된 옵션의 href에 대해 작동합니다.

내가 할 방법은 다음과 같습니다.

<select id="urlSelect" onchange="window.location = jQuery('#urlSelect option:selected').val();">
 <option value="http://www.yadayadayada.com">Great Site</option>
 <option value="http://www.stackoverflow.com">Better Site</option>
</select>

또 다른 방법:

    <script type="text/javascript">
        function change_url(val) {
            window.location=val;
        }
    </script>            
    <select style="width:130px;" onchange="change_url(this.value);">
            <option value="http://www.url1.com">Option 1</option>
            <option value="http://www.url2.com">Option 2</option>
     </select>

URL이 옵션의 값에 포함되는 것을 원하지 않으면 예제를 제공합니다.

<select class="abc">
    <option value="0" href="hello">Hell</option>
    <option value="1" href="dello">Dell</option>
    <option value="2" href="cello">Cell</option>
</select>

    $("select").bind('change',function(){
        alert($(':selected',this).attr('href'));
    })

<select name="xx" class="xxx" onchange="_name(this.options[this.selectedIndex].value,this.options[this.selectedIndex].getAttribute('rel'))">
  <option value="x" rel="xy">aa</option>
  <option value="xxx" rel="xyy">bb</option>
</select>


//for javascript
function _name(value,rel) {
alert(value+"-"+rel);
}

이 코드는 완벽하게 작동합니다.

<script>
$(function() {

    $("#submit").hide();

    $("#page-changer select").change(function() {
        window.location = $("#page-changer select option:selected").val();
    })

});
</script>

<?php
    if (isset($_POST['nav'])) {
         header("Location: $_POST[nav]");
    }
?>
<form id="page-changer" action="" method="post">
    <select name="nav">
        <option value="">Go to page...</option>
        <option value="http://css-tricks.com/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
    <input type="submit" value="Go" id="submit" />
</form>

**redirect on change option with jquery** 

 <select id="selectnav1" class="selectnav">
            <option value="#">Menu </option>
            <option value="   https://www.google.com">
            Google
            </option>
            <option value="http://stackoverflow.com/">
              stackoverflow
            </option>

         </select>

<script type="text/javascript">
   $(function () {

        $('#selectnav1').change( function() {
      location.href = $(this).val();
   });
   });
</script>

Firefox, Chrome, IE에서 작동하는이 코드를 사용해보십시오.

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
<option value="" selected>---Select---</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>
<option value="https://www.google.com">Google</option>

선택 탭 내에서 위치를 재정의하는 가장 간단한 방법은 다음과 같습니다.

<select onchange="location = this.value;">
     <option value="https://www.google.com/">Home</option>
     <option value="https://www.bing.com">Contact</option>
     <option value="mypets.php">Sitemap</option>
</select>

참고 URL : https://stackoverflow.com/questions/5150363/onchange-open-url-via-select-jquery

'Program Club' 카테고리의 다른 글

iOS-메인 스레드에서 실행 확인 (0)	2020.10.27
Objective C에서 int를 문자열로 변환하는 방법 : 예제 코드 (0)	2020.10.27
무작위로 테스트를 다시 시작하는 phpunit (0)	2020.10.27
Scala 2.10 매크로 문서화 (0)	2020.10.27
TemplateHaskell을 사용하여 네임 스페이스의 모든 이름 나열 (0)	2020.10.27

현재글선택을 통한 Onchange 오픈 URL-jQuery

proclub

선택을 통한 Onchange 오픈 URL-jQuery

선택을 통한 Onchange 오픈 URL-jQuery

비고 :

'Program Club' 카테고리의 다른 글

'Program Club'의 다른글

티스토리툴바

선택을 통한 Onchange 오픈 URL-jQuery

선택을 통한 Onchange 오픈 URL-jQuery

비고 :

'Program Club' 카테고리의 다른 글

'Program Club'의 다른글

관련글

티스토리툴바