1

I am trying to create two select boxes. The visitor chooses to select I main category.When i click select1 it changes select2 checkbox. Then i click go button it won't work. I want to add select2 URLs. How Can I do that? Thanks.

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

var goBtn = document.getElementById("goBtn");
var select2= document.getElementById("select2");

goBtn.onclick = function() {
  window.location = select2.url;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="select1" id="select1">
<option selected="" disabled="disabled">choose one</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 url="https://www.mynet.com/" 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>
<input type="button" id="goBtn" value="GO!">
Darker
  • 11
  • 2
  • There are a lot of things wrong with the code. The attribute `value` should be an unique value. When using custom attrbutes like `url`, prefix it with `data-`, so you should change it to `data-url="http://..."`. Your code will just work with the banana option, because is the only one with the url attribute – ajorquera Mar 14 '20 at 13:25
  • If you are learning try not to use libraries, you will be better if you just use native javascript – ajorquera Mar 14 '20 at 13:28

0 Answers0