JS函数.hide

Question

I have created a objects in .less, and i have created a few buttons in a php file, when the button is clicked in the php file I want some of the objects to hide. Here is my php code

 <label for="select-pattern">Select</label>
          <select name="" id="select" data-native-menu="false">
            <option data-placeholder="true">Select</option>
            <option name="asdf" value="pat">Select this</option>
            <option name="fdas" value="tap">select now</option>
    <select>

here is my JS code,

    $(document).ready(function(){
   $("#asdf").click(function(event){
     //Your actions here
       $('#object1, #object2').hide();

   });
 });

the less file is where i created the objects, here is the code for that

 #object1, #object2 {
    width: 46px;
    height: 23px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    margin-left: -10px;
    z-index: 10;
  }

Why isn't the hide function not working? is their an error in the code?

Answer 1

your are having HTML not PHP. I don't believe the click event is valid on options. You have to make a button,and set asfd as id not the name of the element.

<input type="button" id="asdf" value="Hide objects">

Answer 2

Try this. (Assuming the object1 and object2 refers to html elements in your DOM).

You need a change event on the select and check its value. If match, hide the object1 , object2.

    <label for="select-pattern">Select</label>
              <select name="" id="select" data-native-menu="false">
                <option data-placeholder="true">Select</option>
                <option name="asdf" value="pat">Select this</option>
                <option name="fdas" value="tap">select now</option>
        <select>
            <div id="object1">Object 1</div>
            <br>
                <br>
                <div id="object2">Object 2</div>
$().ready(function()
{
$("select").change(function(){
      if($(this).val() == "pat")
       $('#object1, #object2').hide();
    else
        $('#object1, #object2').show();

   });
});

http://jsfiddle.net/9tvmac08/1/

Answer 3

You can use this:

$(document).ready(function(){
    $("#test").on("change", function(){
        var id = $(this).val();
        $(".objects #"+id).toggle();
    });
});

Or, according to your code:

$("#object1, #object2").toggle();

https://jsfiddle.net/8mxqvLwb/

If you want to bind some event to option element in select, you have to bind it to select element.